Skip to content

How can i animate a height transition after changing the height with javascript?

Jouper

How can I animate a height change after changing the height with javascript?

Advertisement

Answer

Do you can use Tranform scale and transition, in this case scaleY(). See an example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      html {
        text-align: center;
        font-size: 14px;
      }
      
      body {
        font-size: 1.6rem;
      }
      
      h1 {
        font-size: 4rem;
        line-height: 5rem;
        margin: 4rem;
      }

      .container {
        margin: 4rem auto;
        width: 90%;
        max-width: 60rem;
      }
      p {
        line-height: 2.2rem;
      }
      
      p:not {
         margin-bottom: 2rem;
      }
      
      .btn {
        bg: #09c;
        background: #09c;
        border: 0;
        color: #fff;
        cursor: pointer;
        display: block;
        font-size: 1.4rem; 
        padding: 1.5rem 3rem;
        transition: background .2s;
        width: 100%;
      }
      
      .btn:hover, .btn:focus {
        background: darken(bg, 15%);
      }
      
      .btn:in {
        background: darken(bg, 50%);
      }
      
      .box {
        background: #e5e5e5 ;
        margin-left: auto;
        margin-right: auto;
        padding: 3rem; 
        text-align: left;
        transform: scaleY(0);
        transition: transform .3s;
        transform-origin: top left;
      }
      
      .box.in {
        transform: scaleY(1);
      }
    </style>
  </head>
  <body>
  <h1>Animated height with CSS transitions</h1>

  <div class='container'>
    <button class='btn'>Click me</button>
    <div class='box'>
      <p>
        Some text here!
      </p>
    </div>
  </div>
  <script>
    document.querySelector('.btn')
      .addEventListener('click', function (event) {

      event.currentTarget.classList.toggle('in')

      document.querySelector('.box')
        .classList.toggle('in')
    })
  </script>
  <body>
<html>