动画文本

Question

jQuery (function ($) { 
     console.log(">>Testing animation"); 
     $('a.loveit').on('click',function(event){ 
      event.preventDefault(); 
      var text = $(this).find('div.love-text'); 
       text.html("<strong>Liked!</strong>"); 

     }); 

    }); 

**HTML** 
<div> 
    <a class="loveit" href="#"> 

    <div class="love-text"> 
    <i class="icn-heart"></i><strong>Like</strong> 
</div> 
    </div> 
    <div class="pure-u-1-2"> 
     <span class="count">0</span> 

    </div> 
    </a> 

CSS

div.love-text { 
     strong{ 
     -webkit-animation: fade-in 1s; 
     -webkit-transition: fade-in 1s; 
     -o-transition: fade-in 1s; 
     -moz-transition: fade-in 1s; 
     } 
    } 

    @-webkit-keyframes fade-in{ 
    from{ 
     // opacity:1; 
     font-size: 14px; 

    } 
    to{ 
     // opacity:0; 
     font-size: 23px; 

    } 
    } 

当我点击 “赞”，它会交换到 “喜欢！”没有心脏。问题是，当页面加载时，它已经开始了它不应该做的动画。所以当第一次点击“like”时，它应该在交换到“LIKED！”时开始动画。另外，如果同一用户再次点击，我无法想象如何切换回原来的内容。对于动画，我不确定css3 - 如何获得缓慢后退，这将显示闪烁着'涟漪'外观的文本（我无法很好地解释它）。我一直在线上看，无法找到动画。

将欣赏指针或提示或帮助！

Answer 1

尝试使用JQuery交通插件（http://ricostacruz.com/jquery.transit/） 然后你就可以轻松地制作动画，如：

$('a.loveit').on('click',function(event){ 
    $('.love-text').transition({opacity: 0, scale: 0}, 200, 'easeOutBack', function() { 

     // Animation completed 
     // Change your element text.. 

     var text = $("#container").find('div.love-text'); 
     text.html("<strong>Liked!</strong>"); 

     $('.love-text').transition({opacity: 1, scale:1}, 500, 'easeOutBack'); 

    }); 
}