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>