Question

我试图按下按钮点击文字。我想要动画＆＃39; flipInY＆＃39;点击按钮上的h1标签。
动画正在发生但不是按照以下链接中的演示给出：
https://daneden.github.io/animate.css/

我想在下面的代码中使用相同的动画：

<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

Answer 1

我相信你想要实现的目标有一个简单的解决方法。

目前，动画正在应用于标题容器，该容器跨越页面的整个宽度。

这可以通过使用display:inline-block;将文本包含在div / span中并将动画应用于该文本来解决。

查看固定的CodePen： http://codepen.io/anon/pen/rrNOjW

按钮上的Animate.css fliptext单击效果不佳

1 个答案: