是否有可能仅使用CSS对innerHTML进行动画化更改?

Is it possible to animate a change to innerHTML using CSS only?

本文关键字：动画 innerHTML 有可能 CSS 是否      更新时间：2023-09-26

我的纯js脚本只是通过使用innerHTML来改变<p>元素中的文本。是否有可能只使用CSS，而不使用jQuery动画这个变化?如果有，怎么做?

谢谢!

在设置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)
相关文章：