这似乎是一个更常见的问题，但是当我尝试使用 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>
还有一件事，在按钮的末尾，由于某种原因出现了 this-​。如果有人可以帮助我，那将不胜感激。
最佳答案
您的代码失败有两个原因。首先，您的代码中的不同位置有两个非法字符。当您运行页面时，您可以看到它出现在按钮旁边，第二个在 webkitTransitionEnd 事件监听器之后导致 JavaScript 出错。其次，当您尝试将事件监听器添加到文档头部的按钮时，它会失败，因为 DOM 尚未在浏览器中注册。
下面的代码应该可以工作。您也可以考虑查看 jQuery document ready function .
<!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>
关于javascript - 代码有效 jsfiddle 不适用于 Dreamweaver，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10368047/