动画显示/隐藏onclick JavaScript

下面是我按下按钮显示/隐藏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>

由于显示不是CSS可设置动画的属性，因此无法用问题中所示的方法实际解决此问题

解决此问题的一种方法是为对象声明最大高度或最大宽度，然后将这些值设置为0或null。在CSS中，than是要包含的转换属性

---

另一种方法是降低“不透明度”值，然后应用“显示”。对于此方法，还需要transition属性。

您可以使用CSS动画。下面是我做的一个项目的例子：

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

要激活js中的动画，请复制以下内容：

document.getElementByIdyour_did_id.style.animation=spin 1.5s备选1