title: How can I animate my less from "display: block" to "display: none"?
body: <p>I have a less file that hide and display an element like the following:</p>
  
  <pre><code>.cmp-accordion__panel {
        &amp;--hidden {
        display: none;
     }
  
     &amp;--expanded {
       display: block;
       -webkit-animation: slide-down 0.5s ease-out;
       -moz-animation: slide-down 0.5s ease-out;
    }
  }
  
  
  @-webkit-keyframes slide-down {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-5%);
   }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
     }     
  }
  
  @-moz-keyframes slide-down {
  0% {
    opacity: 0;
    -moz-transform: translateY(-5%);
    }
    100% {
     opacity: 1;
    -moz-transform: translateY(0);
     }
  }
  </code></pre>
  
  <p>In my JavaScript, I toggle the class name of the element between "cmp-accordion__panel--hidden" and "cmp-accordion__panel--expanded" if the event is triggered. I use keyframe and opacity to animate the transition from "display:none" to "display:block". </p>
  
  <p>However, when I go from "display:block" to "display:none" to hide the element, the effect happens INSTANTLY. What should I add to animate the hiding? </p>