उलटा दिशा में सीएसएस एनीमेशन का पुन: उपयोग करें (राज्य को रीसेट करके?)

Question

मैंने सीएसएस में दो कीफ्रेम एनिमेशन का उपयोग किया है। बाएं से दाएं तक एक चाल और दूसरा एक ही मूल्यों का सटीक उपयोग करता है - लेकिन उलट जाता है।

@keyframes moveLeft 
{ 
    from {transform: translate3d(50px, 0, 0);} 
    to {transform: translate3d(0px, 0, 0);} 
} 


@keyframes moveRight 
{ 
    from {transform: translate3d(0px, 0, 0);} 
    to {transform: translate3d(50px, 0, 0);} 
} 

हालांकि, मुझे आश्चर्य है कि केवल एक कीफ्रेम एनीमेशन का उपयोग करना संभव है या नहीं। लेकिन जैसे ही मैं animation-direction: reverse जोड़ता हूं, एनीमेशन केवल एक बार खेलता है। यह शायद उस जानकारी को बचाता है जिसका उपयोग पहले किया गया था। तो: क्या मैं इस जानकारी को किसी भी तरह रीसेट कर सकता हूं? या क्या अलग-अलग दिशाओं में एक बार एनीमेशन का उपयोग करने की कोई संभावना है? (जे एस का उपयोग किए बिना)

http://jsfiddle.net/vrhfd66x/

Answer 1

नहीं, एनीमेशन अकेले सीएसएस का उपयोग कर पुन: प्रारंभ करने के लिए कोई रास्ता नहीं है। तत्व से एनीमेशन को हटाने के लिए आपको जावास्क्रिप्ट का उपयोग करना होगा और फिर पुनरारंभ करने के लिए इसे तत्व (देरी के बाद) पर फिर से लागू करना होगा।

नीचे क्या W3C's CSS3 Animation Spec कहते है (एक अलग संदर्भ में, लेकिन बात इस मामले के लिए अच्छा धारण करना चाहिए भी):

भी ध्यान दें कि 'एनीमेशन-नाम' का मान बदलने जरूरी नहीं करता है एनीमेशन को पुनरारंभ करें (उदाहरण के लिए, यदि एनिमेशन की एक सूची लागू की जाती है और किसी को सूची से हटा दिया जाता है, तो केवल वह एनीमेशन रुक जाएगा; अन्य एनिमेशन जारी रहेगा)। एनीमेशन को पुनरारंभ करने के लिए, इसे फिर से हटाया जाना चाहिए।

^{जोर मेरा}

क्रिस Coiyer द्वारा इस CSS Tricks Article है भी एक ही इंगित करता है और एक एनीमेशन को पुन: प्रारंभ करने के लिए कुछ जे एस समाधान प्रदान करता है। (नोट: आलेख में ओली के डबलेट का संदर्भ है जो दावा करता है कि अवधि जैसे गुणों को बदलने, पुनरावृत्ति गणना इसे वेबकिट पर पुनरारंभ करती है लेकिन ऐसा लगता है कि वे अब क्रोम पर काम नहीं करते हैं)।

---

सारांश:,

• एक बार एनिमेशन तत्व पर लागू किया जाता है:

  आप पहले से ही निम्नलिखित पर भी चर्चा की है, मैं पूर्णता के लिए फिर से पुनरावृति करने जा रहा हूँ यह तब तक तत्व पर बना रहता है जब तक इसे हटाया नहीं जाता है।

• UA तत्व पर होने वाली एनीमेशन का ट्रैक रखता है और क्या यह पूरा हो गया है या नहीं।
• जब आप :checked (हालांकि एक अलग दिशा के साथ) पर एक ही एनीमेशन लागू करते हैं, तो UA कुछ भी नहीं करता क्योंकि एनीमेशन तत्व पर पहले से मौजूद है।
• चेकबॉक्स पर क्लिक करते समय पदों (तात्कालिक) का स्विच transform की वजह से है जो :checked चयनकर्ता के भीतर लागू होता है। एनीमेशन की उपस्थिति में कोई फर्क नहीं पड़ता।

---

समाधान:

आप नीचे दिए गए स्निपेट से देख सकते हैं, एक भी एनीमेशन के साथ इस को प्राप्त करने यहाँ तक कि जब जावास्क्रिप्ट का उपयोग बहुत जटिल है।

var input = document.getElementsByClassName("my-checkbox")[0]; 
 

 
input.addEventListener('click', function() { 
 
    if (this.checked) { 
 
    this.classList.remove('my-checkbox'); 
 
    window.setTimeout(function() { 
 
     input.classList.add('anim'); 
 
     input.classList.add('checked'); 
 
    }, 10); 
 
    } else { 
 
    this.classList.remove('anim'); 
 
    window.setTimeout(function() { 
 
     input.classList.remove('checked'); 
 
     input.classList.add('my-checkbox'); 
 
    }, 10); 
 
    } 
 
});

input { 
 
    transform: translate3d(50px, 0, 0); 
 
} 
 
.my-checkbox { 
 
    animation: moveLeft 1s; 
 
    animation-direction: reverse; 
 
} 
 
.checked { 
 
    transform: translate3d(0px, 0, 0); 
 
} 
 
.anim{ 
 
    animation: moveLeft 1s; 
 
} 
 
@keyframes moveLeft { 
 
    from { 
 
    transform: translate3d(50px, 0, 0); 
 
    } 
 
    to { 
 
    transform: translate3d(0px, 0, 0); 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<input type="checkbox" class="my-checkbox">

तो, सबसे अच्छा विकल्प (यदि आप CSS एनिमेशन पर कायम करना चाहते हैं) उपयोग दो अलग एनिमेशन है।

वैकल्पिक रूप से, आप मार्सेलो की टिप्पणी पर भी एक नज़र डाल सकते हैं। वास्तविक यूज-केस वास्तव में क्या बेला में प्रदान की जाती है तो transition पर्याप्त होगा और animation आवश्यकता नहीं है। संक्रमण दोनों आगे में काम कर सकते हैं और स्वभाव से विपरीत दिशा-निर्देश और इसलिए एक सुरक्षित शर्त होगी।