क्या मैं एम्बरजेस

Question

में एक शो अप एनीमेशन देख सकता हूं यहां एम्बरजे राउटर http://jsbin.com/agameq/edit का उपयोग करके एक उदाहरण दिया गया है। अब जब मैं मार्ग बदल गया, तो मुझे कुछ शोअप एनीमेशन चाहिए, जैसे फीडइन या फीडऑट। मुझे क्या करना चाहिए?

Answer 1

एंबर में हर View एक विधि didInsertElement नामित किया है:

कहा जाता है जब देखने के तत्व डोम में सम्मिलित किया गया है। इस फ़ंक्शन को किसी भी सेट अप करने के लिए ओवरराइड करें जिसके लिए दस्तावेज़ निकाय में कोई तत्व आवश्यक है।

सभी एंबर विचारों भी एक $ जो jQuery के लिए एक संदर्भ है, तो आप इसे के साथ अपने दृश्य में कुछ तत्व लपेट कर में कोई भी परिवर्तन लागू कर सकते हैं यह जैसे:

// this will animate only the tag h2, which in your case is the title of the users view 
App.UsersView = Ember.View.extend({ 
    templateName: 'users', 
    didInsertElement: function() { 
     this.$('h2').animate({ fontSize: "3em" }, 900); 
    } 
}); 

या आप कर सकते हैं बिना तर्क के इसे कॉल करें (जैसे $()) jQuery द्वारा लिपटे वर्तमान दृश्य को वापस करने के लिए।

एक दृश्य चेतन करने के लिए के रूप में आप उस दृश्य/मार्ग में प्रवेश करते हैं, अपने App.UsersView में ऐसा करते हैं:

// this will animate the entire view 
App.UsersView = Ember.View.extend({ 
    templateName: 'users', 
    didInsertElement: function() { 
     this.$().animate({ fontSize: "3em" }, 900); 
    } 
}); 

(नोट: मेरे एनीमेशन सुंदर लंगड़ा है, लेकिन यह सिर्फ दिखाने के लिए जहां कॉल करने के लिए है विधियों, कोई वास्तविक एनीमेशन करते हैं)

यहाँ @MilkyWayJoe से जवाब के बाद your JSBin

Answer 2

का एक संशोधित संस्करण है, तो आप शायद inserti से पहले देखें छुपाना चाहते हैं यह एनजी, की स्थापना करके isVisible संपत्ति false रहे हैं:

App.UsersView = Ember.View.extend({ 
    templateName: 'users', 

    isVisible: false, 

    didInsertElement: function() { 
     var self = this; 
     this.$().fadeIn(700, function(){ 
      self.set('isVisible', true); //inform observers of `isVisible` 
     }); 
    } 
}); 

या का उपयोग this animation Mixin है, जो आपको मनाया सीएसएस गुण का एक सेट बदलकर दृश्य चेतन करने के लिए अनुमति देता है: मैं हाल ही में एक जोड़ दिया है

App.UsersView = Ember.View.extend(JQ.Animate, { 
    templateName: 'users', 

    isVisible: false, 

    // Observed CSS properties 
    cssProperties: ['display'], 

    // Optional animation properties 
    duration: 700, 
    easing: 'easeInOutCubic', 

    didInsertElement: function() { 
     this.set('display', 'block'); 
    }, 

    afterAnimate: function() { 
     this.set('isVisible', true); 
    } 
});