可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

This seems to be a more common problem, but when I try to use code off of jsfiddle (html/css/javascript) it doesn't work. I'm trying to get a CSS animation to repeat onclick, and found some on links on other questions to jsfiddle that work. However, they do not work when I try to do them on DreamWeaver, and I get no error.

I have http://jsfiddle.net/vxcYJ/45/ , http://jsfiddle.net/AndyE/9LYAT/, and http://jsfiddle.net/6tZd3/, and none work. On dreamweaver, I believe the third jsfiddle would translate into something like this:

<!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>

one more thing, at the end of the button, this->â€‹ appears for some reason. If anyone could help me out, that would be greaty appreciated.

回答1:

Your code is failing for two reasons. Firstly, there are two illegal characters at different places in your code. The one you can see which appears next to the button when you run the page, and the second, which is causing an error in the JavaScript, after the webkitTransitionEnd event listener. Secondly, when you try to add the event listeners to your button in the head of your document, it fails because the DOM has not registered with the browser yet.

The following code should work. You might also consider looking at the 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>

回答2:

Are you trying to view the site in the dreamweaver browser? You are using -webkit properties. These will only work in webkit browsers such as chrome or safari. Similarly, -moz tags will only work in firefox.

I assume dreamweaver doesn't read the -webkit tags. Try using -o tags for opera, -webkit for safari and chrome, -moz for firefox and -ms for IE. Chrome and safari will read -webkit css but ignore -moz and -o since they don't know how to read it.

W3 schools has some good examples of supporting all browsers except IE: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition4 http://www.w3schools.com/css3/css3_transitions.asp

The transform css property (-webkit-transform in your code) will work in IE if you add -ms-transform: http://www.w3schools.com/css3/css3_2dtransforms.asp