Animating container height when inserting child

I want a smooth transition of the height of a container when after inserting a child element.

const cont = document.querySelector('.cont')
    
setTimeout(create,1000)
setTimeout(create,2000)
setTimeout(create,3000)

function create(){
  const div = document.createElement('div')
  div.innerHTML = 'some text'
  cont.appendChild(div)
}
.cont {
    border:1px solid red;
    transition: all .09s linear;
}
    
<div class="cont"></div>
    
    
    

1 answer

  • answered 2018-07-12 08:08 Fantastisk

    I would try something like this:

    And then also applying the class to the blocks you are adding.

    const cont = document.querySelector('.cont')
        
    setTimeout(create,1000)
    setTimeout(create,2000)
    setTimeout(create,3000)
    
    function create(){
      const div = document.createElement('div')
      div.innerHTML = 'some text'
      div.className = 'block'
      cont.appendChild(div)
    }
    .cont{
      border:1px solid red;
      overflow: hidden;
    }
    
    .block {
      animation-name: blockanim;
      animation-duration: 4s;
    }
    
    @keyframes blockanim {
        from {max-height: 0px;}
        to {max-height: 200px;}
    }
    <div class="cont"></div>