jquery - 单击时的动画文本

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;

    }
    }

当我点击“喜欢”时，它会切换为“喜欢!”无心。问题是当页面加载时，它已经开始了它不应该做的动画。所以当第一次点击“喜欢”时，它应该在切换到“喜欢!”时开始动画。另外，如果同一个用户再次点击，我不知道如何换回原来的喜欢。

至于动画，我不确定 css3 - 如何让 easeoutback 显示带有“波纹”外观的闪烁文本(我无法很好地解释)。我一直在网上寻找，找不到动画。

将不胜感激指点或提示或帮助!

Answer 1

尝试使用 JQuery Transit 插件 ( 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');

    });
}