是否可以仅使用 CSS 对 innerHTML 的更改进行动画处理？答案

【问题标题】：Is it possible to animate a change to innerHTML using CSS only?是否可以仅使用 CSS 对 innerHTML 的更改进行动画处理？
【发布时间】：2015-08-30 16:59:13
【问题描述】：

我的纯 JS 脚本只是通过使用 innerHTML 来更改 <p> 元素内的文本。是否可以仅使用 CSS 为这种更改设置动画，而不使用 jQuery？如果有，怎么做？

谢谢！

【问题讨论】：

以什么方式制作动画？您正在更改内容，而不是内容的外观！
是的，我正在更改内容。具体来说，当我单击一个按钮时，我正在生成一个新的随机句子以进入 <p> 元素。目前，这句话只是瞬间改变。我想要一些更流畅的东西，比如旧的句子淡出，新的句子从左边滑进来，或者类似的东西。
设置过渡到 div 的高度和宽度，并将内容设置为自动展开。添加内容后，它应该会自动产生效果

标签： javascript css css-animations

【解决方案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)

【讨论】：

对不起，但我不确定我是否遵循...。在这里，请看看我正在尝试做的事情：fbracht.github.io/yurator 你的方法能否帮助我为句子替换设置动画？你点击图片？（这是一个非常简单的笑话网站，我和一个朋友一起制作作为生日礼物送给另一个朋友 [图片中的大胡子]，它是一个句子生成器，其中包含这个人可能会说的句子。）
应该是。但这取决于您要制作的动画。在这种情况下，您需要淡出当前句子opacity:0，然后更改内部html并将其动画回opacity:1
这个答案有正确的想法，但需要进行两次修改才能使其工作。 setTimeout 需要为 1000 毫秒，而不是 100，以匹配 CSS 过渡持续时间。而更新innerHTML的行需要下移一行，所以它在setTimeout函数的里面。