Question

我一直试图为Dashboard Widget的div消失制作动画，但它只是粗暴地变成了“poof”（如同在预期中一样，只是瞬间消失）。

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之外还有另一种方法吗？

Answer 1

如果您正在寻找一个纯粹的JavaScript解决方案，它可能需要很好地理解javascript事件如何工作以及基本上关于javascript语言。作为参考，您应该查看question on CodeReview

但是我认为最适合你的解决方案而不是依赖jQuery就是检查CSS3动画。即使所有浏览器都不支持它们，您也可以使用Modernizer来填充动画的polyfill。

我最喜欢的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";

如果您需要有关javascript的更多帮助，请查看此answer。

希望这会有所帮助......

Answer 2

我找到了它： AppleAnimator 拥有animator.oncomplete：计时器完成时调用的处理程序。

就我而言：

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

Apple文档实际上将动画代码本身称为“回调”，并且“处理”回调，这使得它最初难以实现。

感谢frenchie，“YourCallbackFunction”让我意识到我遗漏了与回调相关的东西：D

动画div消失，如何平滑？

2 个答案: