2 回答
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>
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