animate.css爲登陸頁面上的歡迎效果

Question

發現這個很酷的東西https://github.com/daneden/animate.css。它在頁面啓動期間工作，但之後我發現動畫CSS仍然在中間點燃。

例如我使用$('.sidebar').addClass('animated fadeInLeft');當我點擊頁面到頁面時，我仍然會生成動畫..如何限制它只能工作一次？

Answer 1

根據.css文件（https://github.com/daneden/animate.css/blob/master/animate.css）動畫的持續時間1秒。

所以你只需要在1秒之後從元素中刪除類之前的設置。

setTimeout(function(){ 
    $('.sidebar').removeClass('animated fadeInLeft'); 
}, 1000); 

如果您正在使用「.hinge」類，然後你需要爲‘setTimeout的’功能2秒增量超時。

Answer 2

一旦效果運行，那麼這樣做：

$('.sidebar').removeClass('animated fadeInLeft'); 

Answer 3

如果點擊網頁的各種原因重新加載在你身邊，只是不包括在網站上的

$('.sidebar').addClass('animated fadeInLeft');

腳本不需要動畫。

否則，使用removeClass()去除導致對網站的動畫，你不想對動畫類：

$('.sidebar').removeClass('animated fadeInLeft');