Pure CSS slidedown / slideup animation using transform translateY

pure-slidedown-slideup.css

.slide-up, .slide-down {
  overflow:hidden;
}
.slide-up > div, .slide-down > div {
  transform: translateY(-100%);
  transition: .4s ease-in-out;
}
.slide-down > div {            
  transform: translateY(0);
} 

pure-slidedown-slideup.html

<div class="container" style="padding: 40px">

  <button onclick="trigger()">Trigger Slideup/SlideDown</button>

  <div id="Slider" class="slide-up">
    <div>
      <p class="contents">
        Hello World Text
      </p>
    </div>
  </div>

</div>

pure-slidedown-slideup.js

// slideup/slidedown
trigger = function () {
  Slider.classList.toggle("slide-down")
  //Slider.classList.toggle("slideup")
};

https://codepen.io/devarthur/pen/eYQbdvR