मैं एक प्रतिक्रिया.जेएस घटक को एनिमेट कर सकता हूं और एनीमेशन के अंत का पता लगा सकता हूं

जब कोई उपयोगकर्ता DOM तत्व पर क्लिक करता है तो मैं एक प्रतिक्रिया घटक फ़्लिप करना चाहता हूं। मैं उनके एनीमेशन मिश्रण के बारे में कुछ दस्तावेज देखता हूं लेकिन यह "एंटर" और "छोड़ें" घटनाओं के लिए सेट अप करना प्रतीत होता है। कुछ उपयोगकर्ता इनपुट के जवाब में ऐसा करने का सबसे अच्छा तरीका क्या है और जब एनीमेशन शुरू होता है और पूरा हो जाता है तो अधिसूचित किया जा सकता है? वर्तमान में मेरे पास एक सूची आइटम है और मैं इसे एक शो पर फ़्लिप करना चाहता हूं जैसे कुछ बटन हटाएं, संपादित करें, सहेजें। शायद मुझे दस्तावेज़ों में कुछ याद आया।मैं एक प्रतिक्रिया.जेएस घटक को एनिमेट कर सकता हूं और एनीमेशन के अंत का पता लगा सकता हूं

एनीमेशन mixin

http://facebook.github.io/react/docs/animation.html

स्रोत

2014-06-08 Tim

मैं वहाँ जावास्क्रिप्ट में प्रारंभ/समाप्ति को पकड़ने के लिए भयानक jQuery एनिमेशन का उपयोग किए बिना ऐसा करने का एक तरीका है नहीं लगता है:

class ClickMe extends React.Component { constructor (props) { super(props) this.state = {} this.state.fade = false this.fadingDone = this.fadingDone.bind(this) } componentDidMount() { const elm = this.refs.button elm.addEventListener('animationend', this.fadingDone) } componentWillUnmount() { const elm = this.refs.button elm.removeEventListener('animationend', this.fadingDone) } fadingDone() { // will re-render component, removing the animation class this.setState({fade: false}) } render() { const fade = this.state.fade return ( <button ref='button' onClick={() => this.setState({fade: true})} className={fade ? 'fade' : ''}> Click me! </button> ) } }

jsfiddle देखें। यदि आप उन एनिमेशन का उपयोग करने के प्रतिकूल नहीं हैं तो वे काम करेंगे ... यह बहुत अच्छा नहीं है: पी –

@ माइक-ड्राइवर 2016 तक यह सच नहीं है। jQuery काम करेगा, लेकिन यह आवश्यक नहीं है। मेरा जवाब देखें – arve0

@ सामान्य रूप से माइकड्राइवर, jQuery में किए गए कुछ भी jQuery के बिना किए जा सकते हैं, यह जावास्क्रिप्ट पर बनाया गया है, इसलिए jQuery ने उसी एपीआई में प्रवेश किया है: जावास्क्रिप्ट – Himmators

क्लिक पर आप राज्य अपडेट कर सकते हैं, कक्षा जोड़ सकते हैं और animationend ईवेंट रिकॉर्ड कर सकते हैं। https://jsfiddle.net/9eqpfv0k/1/

स्रोत

2016-01-09 23:40:13 arve0

मैं React उपयोग नहीं किया है, लेकिन अगर यह CSS3 animations/transitions का उपयोग करता है, तो आप इस तरह कुछ करने के लिए सक्षम हो सकता है:

element.addEventListener('webkitTransitionEnd', function(event) { 

    console.log('Complete'); 

}, false);

स्रोत

2014-06-27 18:32:06

प्रतिक्रिया वर्चुअल डोम का उपयोग करती है। मैं उम्मीद कर रहा था कि रिएक्ट में बनाया गया एक तरीका था इसलिए मुझे सीधे डीओएम के साथ परेशान नहीं होना पड़ा – Tim

यदि आप उपयोगकर्ता को देखकर कुछ एनिमेट करने जा रहे हैं, तो आपको डोम को छूना होगा। उसके चारों ओर कोई रास्ता नहीं है। –

मैं सफलतापूर्वक इस project इस्तेमाल किया मेरे प्रतिक्रिया-हथौड़ा एकीकरण में project हथौड़ों की घटनाओं और प्रतिक्रिया एनीमेशन के साथ कुछ उदाहरण हैं।

स्रोत

2014-08-15 20:16:43

मैं एक प्रतिक्रिया.जेएस घटक को एनिमेट कर सकता हूं और एनीमेशन के अंत का पता लगा सकता हूं

उत्तर

संबंधित मुद्दे