Animation Display Block to Display None - CSS

Question

Display None to Display Block animation is working but I need the animation to work this way also - Animation Display Block to Display None

the animations is not working when action go from block to Display None

have an idea what can be the problem?

#dboldDiv,#dbnewDiv {
 animation: anim .4s ease-in-out;
}
@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

Does this answer your question? [Transitions on the CSS display property](https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property) — Jon P, Jan 08 '20 at 21:51
You can't. There is not intermediate step between `none` and `block` — Jon P, Jan 08 '20 at 21:53

score 2 · Answer 1 · answered Jan 08 '20 at 21:46

2

display is not animatable property

There are two category of properties animatable and not animatable

you can check animated properties list from here :

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

answered Jan 08 '20 at 21:46

Ayman Morsy

1,279
1
10
28

V.Volkov · Answer 2 · 2020-01-08T22:50:22.007

0

display:none won't work smooth. For fluent disappearing try using visibility:hidden, or if just keep 0 opacity and add pointer-events:none, so the object doesn't catch any mouse events.

document.getElementById('hide').addEventListener('click', function(){
  document.getElementById('link').className = 'hide';
});

document.getElementById('show').addEventListener('click', function(){
  document.getElementById('link').className = 'show';
});

document.getElementById('link').addEventListener('click', function(){
  alert('clicked');
});

#link {
  display:block;
}
#link.show {
  animation: anim1 .4s;
  animation-fill-mode: forwards;
}
#link.hide {
  animation: anim2 .4s;
  animation-fill-mode: forwards;
  animation-direction: reverse;
}

@keyframes anim1 {
  0% {
    opacity: 0.3;
    pointer-events:none;
  }
  100% {
    opacity: 1;
    pointer-events:all;
  }
}
@keyframes anim2 {
  0% {
    opacity: 0.3;
    pointer-events:none;
  }
  100% {
    opacity: 1;
    pointer-events:all;
  }
}

<button id="hide">Hide</button>
<button id="show">Show</button>
<a href="#" id="link">hidding &amp; showing</a>

edited Jan 08 '20 at 22:50

answered Jan 08 '20 at 21:36

V.Volkov

731
3
12

I have on click event onclick="newDivHere()" where I use the display - can you show a code example - what you mean, I just don't think that the visibility:hidden will work – Ivan Dern Jan 08 '20 at 21:41
@IvanDern Here you go :) You can't click, until `pointer-events:all` is active, even `cursor:pointer` doesn't work. – V.Volkov Jan 08 '20 at 21:45
i used your code in my case is nothing different - the animation from Display Block to Display None when I click is not working – Ivan Dern Jan 08 '20 at 22:16
@IvanDern Ok, I've updated the answer - now you can see, that in 'hidden mode' there are no events working on link, even though it has `href` and the `click` `eventListener`. The animation works both ways fine. – V.Volkov Jan 08 '20 at 22:52
@IvanDern You don't seem to use complex animation, I'd suggest to use transition instead. – V.Volkov Jan 09 '20 at 10:30

Animation Display Block to Display None - CSS

2 Answers2