消息关闭
    暂无新消息!

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 加载成功的回调里。。。


2个回答

︿ 0

一开始就隐藏,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>