javascript - 过渡不适用

Question

所以我使用 jQuery 来更改图标，并使用 CSS 来应用转换。由于某种原因，它不起作用这是我的代码

CSS

.fa-heart{
  transition: 1s;
}
.fa-heart-o{
  transition: 1s;
}

JS

$('.fa-heart-o').hover(function() {
     $(this).toggleClass('fa-heart-o fa-heart');   
}, function() {
     $(this).toggleClass('fa-heart-o fa-heart'); 
});

演示 http://jsfiddle.net/cLVBg/1/有任何想法吗？

Answer 1

content 不是 animatable property ，因此 transition 不适用。但是，如果您只想用不透明度的过渡来填充心脏，请尝试使用 SVG - 或 CSS-创建心脏，或者只是将一个放在另一个之上并改变它们的不透明度值。

示例:http://jsfiddle.net/cLVBg/5/