Question

单击时，我想要一个按钮来生成三个子选项，然后再次点击时应该缩回然后在父按钮后面消失。我希望从代码中可以清楚地看到这一点（请注意这是一个nativescript应用程序，因此选择稍微有些奇怪的选项）。

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);

Answer 2

您可以通过过渡轻松完成此操作。不要使用可见性，而是尝试使用不透明度来淡入淡出按钮。或者，您可以向JS添加转换结束侦听器，并且只有在三个选项卡移回主按钮后才能将可见性设置为折叠。我认为你的问题是试图让可见性动起来。

JavaScript动画没有按顺序运行？

2 个答案: