Question

我在下面有这个代码，我按下按钮来显示/隐藏div。我希望div中的对象从左向右滑动以在JavaScript中显示动画。如何将其实现到我的代码中？

<script> 
function myFunction() {
var x = document.getElementById("test");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}
}
</script>

Answer 1

由于display不是CSS可动画的属性，因此无法以问题中显示的方式实际解决此问题。

解决此问题的方法是为对象声明max-height或max-width，然后将这些值设置为0或null。在CSS中，要包含transition属性。

另一种方法是降低opacity值，然后应用display。对于此方法，还需要transition属性。

Answer 2

你可以使用CSS动画。这是我做过的一个项目的例子：

 @keyframes spin {
   0% {
     transform:rotate(0deg);
   }
   100% {
     transform:rotate(720deg);
   }
 }

激活js中的动画复制：

document.getElementById("your_did_id").style.animation = "spin 1.5s alternate 1";

动画显示/隐藏onclick JavaScript

2 个答案: