动画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失踪，如何平滑？

回答

相关问题