1

I am trying to show or hide the title of sidepanel while collapsing it to width:50%

I am using display: block to display:none; Somehow I am not able to use the animation on it

Here is the code I am using

.fade-in {
  animation: fade-in 0.5s ease-in-out both;
}
.fade-out {
  animation: fade-out 0.6s ease-in-out both;
}
@keyframes fade-in {
  0% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
@keyframes fade-out {
  0% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    display: block;
  }
}

Any idea why display is not working

Ry-
  • 218,210
  • 55
  • 464
  • 476
mahil
  • 33
  • 10
  • 1
    I'm afraid an animation between `display` conditions is impossible. The only way to implement it is to make another animation that visually hides an element and than really hide an element at finish. In this case `js` is required. If you need such solution, tell me. – voloshin Sep 20 '17 at 15:19
  • Thanks @voloshin. I did it with typescript. – mahil Sep 25 '17 at 06:02

1 Answers1

0

.fade-in {
  animation: fade-in 0.5s ease-in-out both;
  background:black;
  height:200px;
  width:200px;
  margin-bottom:10px;
}
.fade-out {
  animation: fade-out 0.6s ease-in-out both;
  background:red;
  height:200px;
  width:200px;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
    display: none;
  }
  100% {
    opacity: 0;
  }
}
<div class="fade-in"></div>
<div class="fade-out"></div>
Edward
  • 5,942
  • 4
  • 38
  • 55
Saika
  • 398
  • 3
  • 14
  • You Can See : https://stackoverflow.com/questions/26607330/css-display-none-and-opacity-animation-with-keyframes-not-working – Saika Sep 20 '17 at 12:01
  • This does not help at all. when opacity:0 display:none is not getting applied – mahil Sep 20 '17 at 12:01
  • The display property isn't animatable. You can remove it from the keyframes animation with the same result. – Saika Sep 20 '17 at 12:03
  • I am using this animation in angular template where I already have collapse animation. when the sidepanel is collapsed, display: none is not working with opacity. If I don't use opacity and try to make it working with display, I am getting the issue when I am opening my sidepanel back. The content is jumping as display is changed to block from none. I want display:block to be delayed – mahil Sep 20 '17 at 12:05
  • Its purely angular – mahil Sep 20 '17 at 12:08
  • It seems its in Angular 1. Do u have any reference for Angular 4 – mahil Sep 20 '17 at 12:16