애니메이션 텍스트

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와 교통 플러그인 (http://ricostacruz.com/jquery.transit/)를 사용해보십시오 : http://ricostacruz.com/jquery.transit/ 정말 좋은 및 CSS3를 사용

$('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'); 

    }); 
}