Смотря что ты хочешь сделать. Стилями можно управлять, если немного пошевелиться.
https://codepen.io/kris-iris/pen/MPJjgolet wrap = document.querySelector('.wrap');
wrap.onclick = ()=> wrap.classList.toggle('noMagic');
.wrap{
position: relative;
width: 500px;
height: 200px;
background: lightblue;
margin: 0 auto;
}
.wrap::before{
position: absolute;
content: 'Кликни на меня, детка!';
height: 50px;
width: 100%;
background: lightgreen;
transition: 2s;
}
.noMagic.wrap::before{
content: 'А ты молодец!';
display: flex;
justify-content: center;
align-items: center;
animation: move 1s forwards;
}
@keyFrames move{
100% {
height: 100%;
}
}