Animate show/hide onclick JavaScript

Question

I have this code below where I press a button to show/hide a div. I want the objects inside the div to slide from left to right to appear with an animation in JavaScript. How do I implement that into my code?

<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

Due to that display is not an attribute that is CSS animatable there's no way to actually solve this with the way shown in the question.

A way to solve this problem is to declare for the object a max-height or max-width and setting then these values to 0 or null . In CSS than is a transition property to be included.

Another way is to lower the opacity value and then applying display . For this method the transition property is needed as well.

Answer 2

you could use an CSS animation. Here's an example of a projekt I did:

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

to activate the animation in js copy this:

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