使用jQuery插入的CSS上的动画过渡

Question

我正在努力将CSS过渡到动画。我正在插入新的CSS，我希望它与jQuery之间的动画。

首次加载页面时，文本上面有以下转换语句：

#typer-expertise span{transition:color 1s ease-in;}

然后使用jQuery触发并插入以下内容：

Line 46:    $('#'+outputIDName+' span').css('color','#e61873');

因此将文本的颜色更改为#e61873

但是，我曾预料到属性color的这种更改会使用CSS中元素的transition设置进​​行动画处理。但它没有，相反它只是“闪烁”（没有颜色淡化/变化）

我做错了什么？是用jQuery添加CSS的错误吗？

https://jsfiddle.net/73cgurkL/1/

Answer 1

使用add class来触发转换要好得多。如下。

还设置一个超时，以便停止jquery立即将颜色注册到dom。

setTimeout(function() {
  $('#typer-expertise span').addClass('change');
}, 100);

#typer-expertise span {
  color: #000;
  transition: color 1s ease-in;
  -webkit-transition: color 1s ease-in;
}
#typer-expertise span.change {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p id="typer-expertise"><span>Change me</span>
</p>

Answer 2

根据this fiddle将其包装在setTimeout中。

setTimeout(function(){

  $('#' + outputIDName + ' span').css('color', '#e61873');

}, 0);

这会强制重排DOM，有时在添加元素后直接应用css属性以获得动画时需要它。