[英]java script function works only once
this is the function used in order to rotate the p
element: 这是用于旋转
p
元素的函数:
<script>
function ani() {
var z = document.getElementById("rotate");
z.style.webkitTransition = "1.2s";
z.style.transition = "1.2s" ;
z.style.transform = "rotateY(360deg)";
z.style.webkitTransform = "rotateY(360deg)";
z.style.OTransform = "rotateY(360deg)";
z.style.MozTransform = "rotateY(360deg)";
}
</script>
here is the whole code, including html and javascript: 这是完整的代码,包括html和javascript:
<!DOCTYPE html> <html lang="en-US"> <head> <title>animation</title> <meta chartset="utf-8"> <script> function ani() { var z = document.getElementById("rotate"); z.style.webkitTransition = "1.2s"; z.style.transition = "1.2s" ; z.style.transform = "rotateY(360deg)"; z.style.webkitTransform = "rotateY(360deg)"; z.style.OTransform = "rotateY(360deg)"; z.style.MozTransform = "rotateY(360deg)"; } </script> </head> <body> <div> <p onmouseover="ani()" id="rotate" style="background: rgba(0,0,0,0.5); text-align: center; color: #fff;">Great this is rotating!</p> </div> </body> </html>
You should learn to make .css files and import them instead of styling everything in HTML and JavaScript. 您应该学习制作.css文件并导入它们,而不是在HTML和JavaScript中设置所有样式。 This is just plain good practice.
这只是简单的良好做法。
HTML: HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>animation</title>
<meta chartset="utf-8"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<p id="rotate">Great this is rotating!</p>
</body>
</html>
CSS (style.css): CSS(style.css):
#rotate {
background: rgba(0,0,0,0.5);
text-align: center;
color: #fff;
}
#rotate:hover {
-webkit-transition: 1.2s all;
transition: 1.2s all;
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
JavaScript: JavaScript的:
// Nothing! Fantastic!
Thanks for all you comments and answers, you enlighten me. 感谢您提出的所有意见和答案,您能给我带来启发。 here it's what i do , use other function that resets the style and use a delay in order to wait the animation complete as @RobG wrote.
这就是我要做的,使用其他功能重置样式并使用延迟,以等待动画完成,如@RobG所写。
I make use of setInterval() function for setting the delay , and clearInterval()for stoping the continuos execution. 我使用setInterval()函数设置delay,并使用clearInterval()停止连续执行。
I apologize for my english , i'm out of practice. 我为我的英语道歉,我没有参加。
var z; function ani(){ z=document.getElementById("rotate"); z.style.webkitTransition="all 1.2s"; z.style.transition="all 1.2s" ; z.style.transform="rotateY(360deg)"; z.style.webkitTransform="rotateY(360deg)"; z.style.OTransform="rotateY(360deg)"; z.style.MozTransform="rotateY(360deg)"; z.addEventListener("webkitTransitionEnd", unani); z.addEventListener("transitionend", unani); } function unani(){ z.style.webkitTransition=""; z.style.transition="" ; z.style.transform=""; z.style.webkitTransform=""; z.style.OTransform=""; z.style.MozTransform=""; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.