使用animate.css时，动画一开始不隐藏,如何解决呢？

发布于 2022-09-05 10:27:09 字数 813 浏览 33 评论 0

animate.css 的入场动画，一开始（初始态）怎么隐藏呢？(否则会闪一下。)
动画结束后要保持显示。

补充。。

使用了官网推荐的jquery 扩展代码，运动完后自动删除 class。

这是一个坑吗？？？

 $.fn.extend({
        animateCss: function(animationName) {
            var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
            this.addClass('animated ' + animationName).one(animationEnd, function() {
                $(this).removeClass('animated ' + animationName);
            });
            return this;
        }
    });

---------------------后割线
谢谢回答，我动态创建的link标签加的animate.css，然后js立马加class的时候，那库文件还没下下来。所以悲剧了。。如果f12里开启缓存，其他页面刚进去就没事（因为已有animate.css）。。。
。。。。醉了。。
加class的事件应该放在 animate.css 加载成功的回调里。。。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

宁愿没拥抱 2022-09-12 10:27:09

一开始就隐藏，display:none

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="../bower_components/animate.css/animate.css">
    </head>
    <style>
        .box{
            display: none;
            width: 100px;
            height: 100px;
            background: red;
            margin: 0 auto;
        }
    </style>
    <body>
        
        <div style="height: 100px;">
            <div class="box animated"></div>
        </div>
        <button  onclick="show()">显示</button>
        <button  onclick="hide()">隐藏</button>
    </body>
    <script>
        var box = document.getElementsByClassName("box")[0];
        function show(){            
            box.classList.remove("zoomOutRight");
            box.classList.add("zoomInLeft");
            box.style.display="block";
        }
        function hide(){
            box.classList.remove("zoomInLeft");
            box.classList.add("zoomOutRight");
            setTimeout(function(){
                box.style.display="none";
            },1000);
        }
    </script>
</html>

回复收藏 0