是否可以仅使用CSS动画化对innerHTML的更改? [英] Is it possible to animate a change to innerHTML using CSS only?

问题描述

我的pure-JS脚本只需使用 innerHTML 即可更改< p> 元素内的文本.是否可以仅使用CSS设置此更改的动画，而无需使用jQuery?如果可以，怎么办?

My pure-JS script is changing the text inside a <p> element simply by using innerHTML. Is it possible to animate this change with CSS only, without using jQuery? If so, how?

谢谢！

推荐答案

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

Before setting innerHTML add some class to the container, which through CSS set the pre-animation state, then set innerHTML and remove that class. if the container has transition set it should animate to clean state.

 .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的更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！