जावास्क्रिप्ट एनिमेशन क्रम में नहीं चल रहे हैं?

Question

क्लिक करते समय, मैं एक बटन चाहता हूं कि वह तीन बच्चे विकल्पों का उत्पादन करे, जो फिर टैप किए जाने पर फिर से हटाना चाहिए और फिर पैरेंट बटन के पीछे गायब हो जाना चाहिए। मुझे उम्मीद है कि यह कोड से स्पष्ट है (ध्यान दें कि यह एक मूलभूत अनुप्रयोग है, इसलिए थोड़ा अजीब सीएसएस विकल्प)।

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

तुरंत एनिमेशन शुरू करने, इससे पहले कि आप यह कर चलाने के लिए एनिमेशन समय दे रही है नहीं के बाद।

यदि आप प्रतीक्षा करना चाहते हैं, तो एनिमेशन पर कॉलबैक का उपयोग करें, या बस 500ms देरी करें।

मुझे नहीं पता कि आप किस एनीमेशन lib का उपयोग कर रहे हैं, इसलिए मैं सभी तीनों के लिए इंतजार कर रहे कॉलबैक का एक उदाहरण नहीं दिखा सकता।

यहाँ, "बस 500ms इंतजार" संस्करण है, हालांकि:

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

Answer 2

आप शायद बदलाव के साथ आसानी से कर सकता है। दृश्यता का उपयोग करने के बजाय, अपने बटन को अंदर और बाहर फीका करने के लिए अस्पष्टता का उपयोग करने का प्रयास करें। या, आप अपने जेएस में एक संक्रमण अंत श्रोता जोड़ सकते हैं और मुख्य टैब के नीचे तीन टैब वापस ले जाने के बाद केवल पतन के लिए दृश्यता सेट कर सकते हैं। मुझे लगता है कि आपकी समस्या दृश्यता को एनिमेट करने की कोशिश कर रही है।