Javascript 动画是否超出其编程目标？

我正在尝试用本机脚本设置上下文菜单的动画，以便在第一次点击时，子选项跳出，然后在第二次单击时返回。我希望我下面的代码是相当不言自明的，如果按钮没有被点击，那么做动画，如果它被点击，那么做相反的事情

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

   }
   clicked = !clicked;
}

但是，正如您从该动画中看到的，按钮似乎超出了（下方）其原始位置。你知道为什么会这样吗

更新：

感谢您指出，所有动画都是相对于原始基础的。但是，如果我将所有返回翻译更改为

translate:{x:0，y:0}

，那么可见性更改似乎发生在翻译之前？你知道怎么避开吗

---

让我们看一看脸谱网。制作动画；您的第一个动画使Y=Y-75；因此，它从基位置向上移动75像素。第二个动画将其从基础位置向下移动75像素

看看数学： facebook的基本位置是100\，100 第一个动画将其设置为基础-75=100\，25； 第二个动画将其设置为基础+75=100\，175

因此，解决方案很简单；将它们全部返回到X:0和Y:0；哪一个是起始位置？无偏移是基准位置

因此，返回的每个代码块都应该更改为：translate:{x:0，y:0}

更新： 元素->动画调用返回承诺；处理可见性的最佳方法是使用.then（function（）{element.style.visibility='collapse'；}）；因此，一旦元素完成其动画，它将被隐藏

---

您可以做的另一件事是让动画在动画结束时也具有不透明度=0；因此，当它出来时，它会设置为不透明度=1的动画；当它返回时，它将动画设置为不透明度=0。有些动画这看起来真的很好，它在移出时淡入，在返回时淡出

让我们来看看facebook.animate；您的第一个动画使Y=Y-75；因此，它从基位置向上移动75像素。第二个动画将其从基础位置向下移动75像素

看看数学： facebook的基本位置是100\，100 第一个动画将其设置为基础-75=100\，25； 第二个动画将其设置为基础+75=100\，175

因此，解决方案很简单；将它们全部返回到X:0和Y:0；哪一个是起始位置？无偏移是基准位置

因此，返回的每个代码块都应该更改为：translate:{x:0，y:0}

更新： 元素->动画调用返回承诺；处理可见性的最佳方法是使用.then（function（）{element.style.visibility='collapse'；}）；因此，一旦元素完成其动画，它将被隐藏

您可以做的另一件事是让动画在动画结束时也具有不透明度=0；因此，当它出来时，它会设置为不透明度=1的动画；当它返回时，它将动画设置为不透明度=0。有些动画这看起来真的很好，它在移出时淡入，在返回时淡出

animate（）方法实际上返回一个

Promise

sou，您可以使用

然后
回调在动画完成后更改可见性：

google.animate({ ... }).then(function(){
   google.style.visibility = "collapse ";
})

animate（）
方法实际上返回一个
Promise
sou，您可以使用
then
回调在动画完成后更改可见性：

google.animate({ ... }).then(function(){
   google.style.visibility = "collapse ";
})

太棒了，谢谢。我假设平移移动了底座。然而，奇怪的是，新代码阻止了返回动画的出现？我认为这是因为可见性变化发生在转换之前？有什么办法可以改变吗？太棒了，谢谢。我假设平移移动了底座。然而，奇怪的是，新代码阻止了返回动画的出现？我认为这是因为可见性变化发生在转换之前？有什么办法可以改变吗？