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

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

CodePudding user response：

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>

CodePudding user response：

Example without JS

<div > 
  
  <a href="#" >Hover for height animate</a>
  <div >
    <div > 
      <p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
      <p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p> 
    </div>
  </div>
</div>

body{
  font-family: helvetica;
  font-size: 18px;
  text-align: center;
}

.accordion{ 
  display: inline-block;
  text-align: left;
  margin: 1%;
  width: 70%; 
  
  &:hover{
  
    // max-height technique
    .accordion-content{
      // If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and we can use "max-height" with a great value for emulate this effect.
      max-height: 300px;
    }
  
  }
}

.accordion-content{
  -webkit-transition: max-height 1s; 
  -moz-transition: max-height 1s; 
  -ms-transition: max-height 1s; 
  -o-transition: max-height 1s; 
  transition: max-height 1s;  
  background: #e5feff;
  overflow: hidden;
  // "height: 0" not work with css transitions
  max-height: 0;
}

.accordion-inner{
  padding: 0 15px;
}

.accordion-toggle{
  -webkit-transition: background .1s linear;   
  -moz-transition: background .1s linear;   
  -ms-transition: background .1s linear;   
  -o-transition: background .1s linear;   
  transition: background .1s linear;   
  background: #00b8c9;
  border-radius: 3px;
  color: #fff;
  display: block;
  font-size: 30px;
  margin: 0 0 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  
  &:hover{
    background: darken(#00b8c9, 15%);
  }
  
}