सीएसएस एनीमेशन,

Question

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

.toggle-up { 
    animation-name: toggle-up; 
    animation-delay: 0.25s; 
    animation-duration: 0.75s; 
    animation-fill-mode: forwards; 
} 
.toggle-down { 
    animation-name: toggle-down; 
    animation-delay: 0.25s; 
    animation-duration: 0.75s; 
    animation-fill-mode: forwards; 
} 

/*animations*/ 
@keyframes toggle-up { 
    100% { 
    transform: rotate(180deg); 
    } 
} 
@keyframes toggle-down { 
    100% { 
    transform: rotate(180deg); 
    } 
} 

Answer 1

आप वास्तव में कुछ इस सरल के लिए एक-फ़्रेम एनीमेशन जरूरत नहीं है। यदि आप क्लिक पर अपने आइकन पर एक वर्ग जोड़ते हैं तो इसे हटा दें यह आपके घूर्णन को लागू करेगा। Here is a working plunkr using font awesome and a simple rotation। यह सिर्फ एक साधारण उदाहरण है, आप विक्रेता उपसर्ग का उपयोग करना चाहते हैं और जागरूक रहें कि सीएसएस संक्रमण पुराने ब्राउज़र में काम नहीं करते हैं।

<div id="container"> 
    <i id="icon" class="fa fa-arrow-down"></i> 
</div> 

.fa-arrow-down{ 
    transform: rotate(0deg); 
    transition: transform 1s linear; 
} 

.fa-arrow-down.open{ 
    transform: rotate(180deg); 
    transition: transform 1s linear; 
} 

(function(document){ 
    var div = document.getElementById('container'); 
    var icon = document.getElementById('icon'); 
    var open = false; 

    div.addEventListener('click', function(){ 
    if(open){ 
     icon.className = 'fa fa-arrow-down'; 
    } else{ 
     icon.className = 'fa fa-arrow-down open'; 
    } 

    open = !open; 
    }); 
})(document); 

Answer 2

.square { 
    width: 100px; 
    height: 100px; 
    background-color: #ff0000; 
    transition: all 0.75s 0.25s; 
} 

.toggle-up { 
    transform: rotate(180deg); 
} 

.toggle-down { 
    transform: rotate(0); 
} 

आप अपने एनीमेशन पूरा करने के लिए एक प्रारंभिक अवस्था होनी चाहिए।

यहाँ उदाहरण है: codepen

<label for="checkbox"> 
    <input type="checkbox" id="checkbox"> 
    <div class="square toggle-down"></div> 
</label> 


#checkbox { 
    display: none; 
} 

.square { 
    width: 100px; 
    height: 100px; 
    background-color: #ff0000; 
    transition: all 0.75s 0.25s; 
    transform: rotate(0); 
} 

#checkbox:checked + .square { 
    transform: rotate(180deg); 
} 

सामान्य विचार Adjacent sibling selectors और का उपयोग कर ब्लॉक वर्ग बदलने के लिए है: codepen

अद्यतन

यहाँ जावास्क्रिप्ट का उपयोग किए बिना संस्करण है चेकबॉक्स चेक राज्य।