溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
animate.css是一個有趣的，跨瀏覽器的css3動畫庫。
一、首先引入animate css文件
<link rel="stylesheet" href="animate.css" rel="external nofollow" >
二、給指定的元素加上指定的動畫樣式名
<div id="box" class="animated bounce"></div>
這里包括兩個class名，第一個是基本的，必須添加的樣式名，任何想實現的元素都得添加這個。第二個是指定的動畫樣式名。
三、如果說想給某個元素動態添加動畫樣式，可以通過jquery來實現
給動畫對象添加類，然后監聽動畫結束事件，一旦監聽到動畫結束，立即移除前面添加的類。
官方給出了jQuery的封裝：
//擴展$對象，添加方法animateCss
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});
//調用示例：
$('#box').animateCss('bounce');
以上這篇jQuery封裝animate.css的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
