0

I'm trying to create a dissolve and I do this by setting the animation property like this: 

var element = getElementById("myEl");
element.style.animation = "fadein 0.3s ease-out";

And then make it visible with the display property: 

var element = getElementById("myEl");
element.style.display = "block";

But when I set display to display: none it doesn't fade out: 

var element = getElementById("myEl");
element.style.display = "none";

Is there a way to set CSS so that it fades out and fades in?

Here is my fade out animation that crashes the page (since the element is invisible) when I try to use it: 

@keyframes fadeout {

    100% {
        opacity: 1;
    }
    0% {
        opacity: 0;
    }

}

UPDATE:
Where is the pause and play animation option? If an animation has played, how do I play it again? It's odd, since there are no play(), pause() and reverse() methods.

Here's what I'm doing to get it to play reversed after it played once. In other words, to fade out after it has faded in: 

var style = overlay.style;
var animation = null;
style.animationPlayState = "paused";

if (style.animation) {
    animation = style.animation;
    style.animation = null;
    style.animationPlayState = "paused";
    overlay.addEventListener("animationend", function(event) {
        log("animation ended");
        overlay.removeEventListener("animationend", arguments.callee);
    });

    setTimeout(function() {
        style.animation = animation;
        style.animationPlayState = "paused";
        style.animationDirection = "reverse";
        style.animationPlayState = "running";
    }, 30);
}
Chris
  • 1,206
  • 2
  • 15
  • 35
1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
  • 1
    Possible duplicate of [Transitions on the display: property](https://stackoverflow.com/questions/3331353/transitions-on-the-display-property) – Dai Oct 28 '19 at 19:19
  • 2
    you better add/remove a class from witch your animation is loaded , `fadein 0.3s ease-out forwards`and `fadein 0.3s ease-out reverse forwards`. read https://developer.mozilla.org/en-US/docs/Web/CSS/animation to understand reverse and forwards and get the idea ;) – G-Cyrillus Oct 28 '19 at 20:26
  • @G-Cyr Let's say I set the animation to reverse. According to some display: none will not trigger it. So I need to play the animation first and when it's done set it to display none? If I have the element is there a way to play the new reverse animation? – 1.21 gigawatts Oct 28 '19 at 21:21
  • @G-Cyr I tried setting animationPlayState to running but it was already set to that. So I set it to paused and then running and still nothing in my tests. – 1.21 gigawatts Oct 28 '19 at 21:38

0 Answers0