JavaScript animation not working fine?

When I click a button, I want the button to create three child parameters, which then, when pressed again, should be removed and then disappear when behind the parent button. Hope this is clear from the code (note that this is an application for nativescript, which means a bit of a weird css choice).

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

enter image description here

However, as you can see from the gif, in the return path, the buttons simply disappear before returning. What can I do to provide animation in sequence?

+5
source share
2 answers

You do it:

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

immediately after starting the animation, without providing animation time before you do it.

If you want to wait, use the callback to animate or just delay 500 ms.

I don’t know what kind of animation you are using, so I can’t show an example of a callback waiting for all three to complete.

Here is the "just wait 500 ms" version:

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

You could easily do this with transitions. Instead of using visibility, try using opacity to fade your buttons. Or you can add a transition listener to your JS and only set the visibility to collapse after the three tabs have returned under the main button. I think your problem is trying to revive visibility.

0
source

Source: https://habr.com/ru/post/1246815/


All Articles