欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jquery.animate.js调用Animate.css实现强大的css3动画

程序员文章站 2022-03-01 20:54:03
...

引用

<link rel="stylesheet" href="animate.min.css">
<script src="jquery.js"></script>
<script src="jquery.animate.js"></script>

给指定的元素加动画样式

<div class="animated fadeInLeft"></div>
// 这里包括两个class名,第一个是基本的,必须添加的样式名,任何想实现的元素都得添加这个。
第二个是指定的动画样式名。

给元素添加动画样式,通过jquery来实现

$(function(){
    $('.animated').animateCss('bounceOutLeft');
});

jquery.animate.js

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

Animate.css

链接: https://daneden.github.io/animate.css/

相关标签: Animate.css

上一篇: CSS3之animate动画

下一篇: 帧动画