JavaScript动画没有按顺序运行？

Question

单击时,我想要一个按钮来生成三个子选项,然后再次点击时应该缩进然后在父按钮后面消失.我希望从代码中可以清楚地看到这一点(注意这是一个nativescript应用程序,因此有点奇怪的css选择).

exports.fabTap = function (args) {
   var google = page.getViewById("google");
   var facebook = page.getViewById("facebook");
   var amazon = page.getViewById("amazon");
   if (clicked == false) {
        google.style.visibility = "visible";
        facebook.style.visibility = "visible";
        amazon.style.visibility = "visible";

        google.animate({
                translate: { x: -55, y: -66 },
                duration: 500,
                curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
        });
        facebook.animate({
                translate: { x: 0, y: -75 },
                duration: 500,
                curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
        });
        amazon.animate({
                translate: { x: 55, y: -66 },
                duration: 500,
                curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
        });
   } else {
        google.animate({
                translate: { x: 0, y: 0 },
                duration: 500,
                curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
        });
        facebook.animate({
                translate: { x: 0, y: 0 },
                duration: 500,
                curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
        });
        amazon.animate({
                translate: { x: 0, y: 0 },
                duration: 500,
                curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
        });
        google.style.visibility = "collapse";
        facebook.style.visibility = "collapse";
        amazon.style.visibility = "collapse";
   }

   clicked = !clicked;
}

但是,正如你可以从gif看到的那样,在回程中,按钮在返回之前就消失了.我该怎么做才能确保按顺序动画？

Answer 1

你正在这样做：

google.style.visibility = "collapse";
facebook.style.visibility = "collapse";
amazon.style.visibility = "collapse";

启动动画后立即执行，在执行此操作之前不给动画运行时间。

如果您想等待，可以对动画使用回调，或者仅延迟 500 毫秒。

我不知道您正在使用什么动画库，因此我无法显示等待所有三个完成的回调的示例。

不过，这是“只需等待 500 毫秒”的版本：

setTimeout(function() {
    google.style.visibility = "collapse";
    facebook.style.visibility = "collapse";
    amazon.style.visibility = "collapse";
}, 500);