替换文本后CSS动画不起作用？答案

【问题标题】：CSS animation not working after replacing text?替换文本后CSS动画不起作用？
【发布时间】：2017-06-08 18:36:05
【问题描述】：

对于我的网站，我正在尝试淡出单词的一部分，替换它，然后再淡入。我正在使用 animate.css 和 jquery 来执行此操作。

HTML

      <h1>D<span id="span-header">iscover</span></h1>

JavaScript

$("#span-header").addClass("animated fadeOut");
setTimeout(function() {
   var newText = $("#span-header").text().replace("iscover", "ispicio");
   $("#span-header").text(newText);
}, 700);
$("#span-header").addClass("animated fadeIn");

它正在做的是淡出并替换文本，但它不会淡入。我做错了什么？

【问题讨论】：

你能提供一个小提琴吗？另外，您的 ID 似乎不匹配。
您可能需要在添加 fadIn 类之前删除 fadeOut 类，具体取决于您的 CSS 编写方式。

标签： javascript jquery html css animate.css

【解决方案1】：

第一个：你需要将.addClass("fadeIn")的代码移动到setTimeout回调函数中

2nd：在添加fadeIn 类之前使用.removeClass('fadeOut') 删除fadeOut 类

演示

$("#span-header").addClass("animated fadeOut");
setTimeout(function() {
   var newText = $("#span-header").text().replace("iscover", "ispicio");
   $("#span-header").text(newText);
   $("#span-header").removeClass('fadeOut').addClass("fadeIn");
}, 700);

【讨论】：