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>

Alban · Accepted Answer · 2017-12-09 23:05:05Z

1

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";

answered Dec 9, 2017 at 23:05

Alban

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Bilal Mahmoud · Accepted Answer · 2017-12-09 22:54:45Z

0

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.

answered Dec 9, 2017 at 22:54

Bilal Mahmoud

261 silver badge4 bronze badges

Collectives™ on Stack Overflow

Animate show/hide onclick JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related