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

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?