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)

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

1 个答案: