代码工作 jsfiddle 不适用于 dreamweaver

这

似乎是一个更常见的问题，但是当我尝试使用jsfiddle（html/css/javascript）的代码时，它不起作用。我正在尝试让一个 CSS 动画在点击时重复，并在其他问题的链接上找到了一些 jsfiddle 该工作。但是，当我尝试在 DreamWeaver 上执行它们时，它们不起作用，并且我没有收到任何错误。

我有 http://jsfiddle.net/vxcYJ/45/、http://jsfiddle.net/AndyE/9LYAT/和 http://jsfiddle.net/6tZd3/，但没有一个工作。在 dreamweaver 上，我相信第三个 jsfiddle 会翻译成这样的东西：

<!DOCTYPE>
<head>
<style>
.animate {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
}
.initial {
    -webkit-transform: rotate(0deg);
}
.final {
    -webkit-transform: rotate(360deg);
}
</style>
<script>
document.getElementById('button').addEventListener('click', function()
{
    this.setAttribute('class', 'animate final');
});
document.getElementById('button').addEventListener('webkitTransitionEnd', function() {
    this.setAttribute('class', 'initial');
});
</script>
</head>
<body>
<button type="button" id="button" class="animate initial">Click me!</button>
</body>
</html>

还有一件事，在按钮的末尾，由于某种原因出现了这个> â€‹。如果有人能帮助我，那将不胜感激。

您的代码失败有两个原因。首先，代码中不同位置有两个非法字符。当你运行页面时，你可以看到它出现在按钮旁边，第二个，在webkitTransitionEnd事件侦听器之后，它在JavaScript中导致错误。其次，当您尝试将事件侦听器添加到文档头部的按钮时，它会失败，因为 DOM 尚未向浏览器注册。

以下代码应该有效。你也可以考虑看看jQuery文档就绪函数。

<!DOCTYPE>
<head>
<style>
.animate {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
}
.initial {
    -webkit-transform: rotate(0deg);
}
.final {
    -webkit-transform: rotate(360deg);
}
</style>
</head>
<body>
<button type="button" id="button" class="animate initial">Click me!</button>
<script>
document.getElementById('button').addEventListener('click', function()
{
    this.setAttribute('class', 'animate final');
});
document.getElementById('button').addEventListener('webkitTransitionEnd', function() {
    this.setAttribute('class', 'initial');
});
</script>
</body>
</html>

您是否正在尝试在 Dreamweaver 浏览器中查看该网站？您正在使用-webkit属性。这些仅适用于 webkit 浏览器，例如 chrome 或 safari。同样，-moz标签只能在火狐中工作。

我假设 dreamweaver 不会读取-webkit标签。尝试将 -o 标签用于 opera，-webkit用于 safari 和 chrome，-moz 用于 Firefox 和 -ms用于 IE。Chrome和safari将读取-webkit css，但忽略-moz和-o，因为它们不知道如何读取它。

W3学校有一些支持除IE以外的所有浏览器的很好的例子：http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition4 http://www.w3schools.com/css3/css3_transitions.asp

transform如果您添加 -ms-transform ： http://www.w3schools.com/css3/css3_2dtransforms.asp，则 css 属性（代码中的-webkit-transform）将在 IE 中工作

相关内容

最新更新

热门标签：