動畫div失蹤，如何平滑？

我一直在試圖製作一個Dashboard Widget的div失蹤動畫，但它只是殘酷地變成「噗」（如在，只是瞬間消失，如預期的那樣）。動畫div失蹤，如何平滑？

function removeElement(elementId) 
{ 
duration = 9000; // The length of the animation 
interval = 13; // How often the animation should change 
start = 1.0; // The starting value 
finish = 0.0; // The finishing value 
handler = function(animation, current, start, finish) { 
    // Called every interval; provides a current value between start and finish 
    document.getElementById(elementId).style.opacity = current; 
    }; 
    new AppleAnimator(duration, interval, start, finish, handler).start(); 
interval = 1; 
start= "visible"; 
finish = "hidden"; 
duration = 9001; 
handler = function(animation, current, start, finish) { 
    document.getElementById(elementId).style.visibility="hidden"; 
    }; 
    new AppleAnimator(duration, interval, start, finish, handler).start(); 

}

我預計其不透明度達到零後「消失」在div毫秒，但對於一個不那麼明顯的原因（我），它只是立即消失。如果我註釋掉第二個動畫代碼，div淡出（但它仍然是活動的，我不想要）。

我還沒見過的所有解決方案都依賴於使用JQuery並在動畫結束後等待事件，除了JQuery之外，還有其他方法可以實現嗎？

來源

2012-03-01 Kheldar

我發現：AppleAnimator擁有animator.oncomplete：當定時器完成稱作處理。

在我的情況：

var anim = new AppleAnimator(duration, interval, start, finish, handler); 
anim.oncomplete= function(){ 
      document.getElementById(elementId).style.visibility="hidden"; 
          }; 
anim.start();

蘋果文檔實際上所謂的「回調」，這使得它有點難以在率先實現了動畫代碼本身，而「處理程序」的回調。

感謝frenchie雖然，「YourCallbackFunction」讓我意識到我是缺少有關回調的東西：d

來源

2012-03-01 17:58:27 Kheldar

好的，好的，它有幫助。 – frenchie 2012-03-01 18:01:22

如果你正在尋找一個純JavaScript的解決方案，它可能需要如何JavaScript事件的工作，基本上有很好的理解關於JavaScript語言。作爲參考你應該檢查這question on CodeReview

但我認爲最好的解決方案，而不是依靠jQuery是檢出CSS3動畫。即使他們不被所有瀏覽器支持，您也可以使用Modernizer來填充動畫的填充。

我最喜歡的CSS3動畫庫是Animate.css。它非常整潔，併爲您提供頁面中的各種演示。

您必須首先選擇一個動畫並將其添加到您的CSS樣式表。然後有另一個自定義類包含有關動畫的所有內容。

.disappear{ 
    -webkit-animation-duration: 3s; 
    -webkit-animation-delay: 2s; 
    -webkit-animation-iteration-count: infinite; 
}

然後，您可以使用javascript事件在類中切換到您的元素。下面是你如何向一個元素添加一個類。

var animationObject = document.getElementById("poof"); 
animationObject.className = animationObject.className + " disappear";

如果您需要關於如何應該這樣做看看這個answer JavaScript的更多幫助。

希望這會有所幫助...

來源

2012-03-01 17:58:58 Chan

其實，我正在用Dashcode來製作一個小部件，這意味着我不在乎瀏覽器。然而，這是一個非常完整的答案，我會學習，所以+1：D – Kheldar 2012-03-01 18:09:26

動畫div失蹤，如何平滑？

回答

相關問題