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 中看到的那样，在 return 旅程中，按钮恰好在 return 之前消失了。我该怎么做才能确保按顺序设置动画？

Answer 1

您正在这样做：

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

在开始动画后立即，在你开始之前不给动画时间运行。

如果你想等待，要么在动画上使用回调，要么只延迟 500 毫秒。

我不知道你使用的是什么动画库，所以我无法展示等待所有三个完成的回调示例。

这里是 "just wait 500ms" 版本：

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

Answer 2

您可能可以通过过渡轻松地做到这一点。尝试使用不透明度来淡入淡出按钮，而不是使用可见性。或者，您可以向您的 JS 添加一个过渡结束侦听器，并且仅在三个选项卡移回主按钮下方后才将可见性设置为折叠。我认为您的问题在于尝试设置可见性动画。

JavaScript 动画不按顺序运行？

JavaScript animations not running in order?

javascript

css

animation

nativescript

JavaScript 动画不按顺序 运行？

JavaScript animations not running in order?

javascript

css

animation

nativescript

JavaScript 动画不按顺序运行？