Animate.css fliptext при нажатии кнопки не работает хорошо

Я пытаюсь перевернуть текст при нажатии кнопки. Я хочу, чтобы анимация «flipInY» на теге h1 нажата на кнопку.
Анимация происходит, но не как на демо дать в ссылке ниже:
https://daneden.github.io/animate.css/Animate.css fliptext при нажатии кнопки не работает хорошо

Я хочу такую же анимацию в коде ниже:

<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css"> 
</head> 
<body> 
    <div> 
     My Name is <h1 id="txt">It Works!</h1> Hardik 
    </div> 
    <button type="button" id="btn">Animate</button> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script> 
    <script> 
     $.fn.extend({ 
      animateCss: function (animationName) { 
       var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
       $(this).addClass('animated ' + animationName).one(animationEnd, function() { 
        $(this).removeClass('animated ' + animationName); 
       }); 
      } 
     }); 
     $("#btn").click(function() { 
      $('#txt').animateCss('flipInY'); 
     }); 
    </script> 
</body> 
</html>

Я также создал codepen здесь:
http://codepen.io/anon/pen/bwGdvO

источник

2016-09-01 Ubiquitous Developers

Я считаю, что то, что вы пытаетесь достичь, имеет простое решение.

В данный момент анимация применяется к контейнеру заголовка, который охватывает всю ширину страницы.

Это можно решить, обернув текст внутри заголовка div/span, используя display:inline-block; и применив вместо него анимацию.

См фиксированной CodePen: http://codepen.io/anon/pen/rrNOjW

источник

2016-09-01 10:33:21

Ооо Как глупо меня. Я не знал, что анимация работает на полную ширину. спасибо за помощь –

Animate.css fliptext при нажатии кнопки не работает хорошо

ответ

Смежные вопросы