CSS वर्ग

Question

हटाने के बाद काम नहीं कर रहा संक्रमण कृपया मेरी बेला की जाँच करें अपने आप। open-cart-circleheight, width और border-bottom-left-radius गुण, एनीमेशन द्वारा किया बदलाव:

@keyframes trigger-cart-circle { 
    100% { 
    height: 95px; 
    width: 495px; 
    border-bottom-left-radius: 26%; } 
} 

और यह कैसे open-cart-circle लग रहा है की तरह है:

.open-cart-circle { 
    animation-delay: 0s; 
    animation-duration: 0.8s; 
    animation-name: trigger-cart-circle; 
    animation-fill-mode: both; 
} 

तो जब open-cart-circle एनीमेशन जोड़ा जाता है शुरू होता है और मैं करने के लिए आप चाहते हैं नोटिस animation-fill-mode जानबूझकर कोड में रखा गया है क्योंकि मैं साइड बार खोलने और बंद करने के दौरान "सर्कल" को आसानी से ले जाना चाहता हूं (0.5 के साथ संक्रमण)। चूंकि साइड बार को दो बार बंद करने के बाद , सीएसएस संक्रमण काम नहीं कर रहे हैं। क्यूं कर? मैं तो बस अटक घंटे मिल गया है ...

यहाँ cart-circle संक्रमण होना चाहिए: सभी क्योंकि इस "सर्कल" जब बंद करने चाहिए "धीरे" अपने मूल आकार में वापस:

#cart-circle { 
    position: fixed; 
    z-index: 999; 
    box-shadow: 0 8px 11px rgba(0, 0, 0, 0.247); 
    top: 0; 
    right: 0; 
    text-align: right; 
    border-bottom-left-radius: 100%; 
    border: 0.051px solid #333; 
    background-color: #f1c40f; 
    cursor: pointer; 
    transition: all 0.5s; /*HERE*/ 
} 

संपादित

क्या will-change संपत्ति के संभावित समाधान के लिए यहां कोई बिंदु है?

Answer 1

जैसा कि आप देख सकते हैं, transitionanimation पर लागू नहीं होता है।

तो समाधान सरल है, trigger-* एनिमेशन का नाम trigger-open-* पर बदलें और संबंधित trigger-close-* एनिमेशन बनाएं।

फिर हर बार जब आप open-* कक्षा जोड़ते हैं, तो close-* कक्षा को हटा दें। और हर बार जब आप open-* कक्षा हटाते हैं, तो close-* कक्षा जोड़ें।

यहां आपका jsfiddle तय है। https://jsfiddle.net/pu5y8quz/