Question

这似乎是一个更常见的问题，但是当我尝试使用jsfiddle（html / css / javascript）的代码时，它不起作用。我正在尝试获得一个CSS动画来重复onclick，并在其他问题的链接上找到了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>

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

Answer 1

您的代码失败有两个原因。首先，代码中的不同位置有两个非法字符。运行页面时，您可以看到按钮旁边显示的那个，以及在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>

Answer 2

您是否尝试在Dreamweaver浏览器中查看该网站？您正在使用-webkit属性。这些只适用于chromekit或safari等webkit浏览器。同样，-moz标记只能在firefox中使用。

我认为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 css属性（代码中的-webkit-transform）如果添加-ms-transform，则可在IE中使用：http://www.w3schools.com/css3/css3_2dtransforms.asp

代码工作jsfiddle没有在Dreamweaver上工作

2 个答案: