是否可以仅使用CSS动画对innerHTML的更改？

Question

我的纯JS脚本<p>只是通过使用来改变元素中的文本innerHTML.是否可以仅使用CSS为此更改设置动画,而不使用jQuery？如果是这样,怎么样？

谢谢!

Answer 1

在设置innerHTML之前，向容器添加一些类，该类通过CSS设置动画前状态，然后设置innerHTML并删除该类。如果容器具有过渡设置，则应设置动画以达到清洁状态。

 .container {
        transition: all 1s;
        max-height: 300px;
    }

    .container.pre-animation {
        opacity:0;
        max-height: 0;
    }

setTimeout 确保效果更明显

var innerHTMLString = '<h1> I am H1 </h1>';

var container = document.querySelector('.container')

container.classList.add('pre-animation');
container.innerHTML = innerHTMLString +'ravi';
setTimeout(function(){
    container.classList.remove('pre-animation')
},100)