Animate.css 是一組好玩的 CSS animation keyframe,提供很多誇張的 DOM 動畫效果。使用方法根據網頁是用 Script 在想要做動畫的元素上面加上 class,然後就會觸發 CSS transition。以 jQuery 為例:
$('.bouncy').addClass('bounceInDown');
但這個作法有個問題,在他的範例頁面上也是,就是在動畫結束之後沒有辦法再跑一次(因為要先拿掉 Class 再加才會有 transition)。所以最基本的,應該要在動畫跑完(預設是 1 秒鐘)之後把 class 偷偷拿掉。我還有其他的需求像是 *Out 的 transition 跑完之後就把元素藏起來、callback、如果不支援的瀏覽器就跑 jQuery 動畫這樣,最後就變成這樣一個小小的 helper plug-in 了。
jQuery.fn.animateCSS = function (className, callback) { var that = this; if (!Modernizr.csstransforms || !Modernizr.csstransitions) { // for old browsers we use jQuery animation // only fadeIn and fadeOut for now if (/In/.test(className)) this.fadeIn(1000); if (/Out/.test(className)) this.fadeOut(1000); } if (/In/.test(className)) this.show(); setTimeout( function () { that.removeClass(className); if (/Out/.test(className)) that.hide(); if (typeof callback === 'function') callback.apply(that, that); }, 950 ); return this.addClass('animated ' + className); }
有需要請隨意複製貼上到自己的專案去囉。
很有意思的動畫,謝謝