CSS3 एनिमेशन को पुनरारंभ करना

उपयोगकर्ता इंटरेक्शन पर CSS3 एनिमेशन को पुनर्जीवित करना एक सामान्य कार्य है। हालाँकि एनिमेटेड तत्व को हटाना और पुनः सम्मिलित करना प्रभावी लग सकता है, लेकिन यह अनावश्यक जटिलता का परिचय देता है। एनीमेशन को निर्बाध रूप से रीसेट करने के लिए रीफ़्लो की शक्ति का लाभ उठाकर एक अधिक परिष्कृत समाधान उभरता है।

रीफ़्लो, दस्तावेज़ संरचना को पुन: स्वरूपित करने और फिर से रंगने की एक प्रक्रिया, एनीमेशन टाइमलाइन को बाधित किए बिना शैलियों को बदलने के लिए एक सुविधाजनक तंत्र प्रदान करती है। एनीमेशन प्रॉपर्टी को संक्षेप में 'कोई नहीं' पर सेट करने और फिर रीफ़्लो ट्रिगर करने से, ब्राउज़र को किसी भी प्रगति वाले एनिमेशन को अनदेखा करने का संकेत मिलता है। यह बाद के शैली परिवर्तनों को तुरंत प्रभावी करने की अनुमति देता है, एनीमेशन को प्रभावी ढंग से पुनः आरंभ करता है। var el = document.getElementById('एनिमेटेड'); el.style.animation = 'कोई नहीं'; el.offsetHeight; /* ट्रिगर रिफ़्लो */ el.style.animation = शून्य; }

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