简体   繁体   English

Java脚本功能只能运行一次

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM