Why does this CSS3 Animation happen instantly? -
मुझे इस CSS3 एनीमेशन के साथ समस्याएं आ रही हैं:
@ - webkit-keyframes hide_card {0% {width: 250px; मार्जिन-बाएं: 10px; मार्जिन-दाएं: 10px; सीमा चौड़ाई: 3px; } 100% {चौड़ाई: 0 पिक्सेल; मार्जिन-बाएं: 0 पिक्सेल; मार्जिन-दाएं: 0 पिक्सेल; सीमा चौड़ाई: 0 पिक्सेल; }} @ -मोझ-कीफ्रेम लपेटाकार्ड {0% {width: 250px; मार्जिन-बाएं: 10px; मार्जिन-दाएं: 10px; सीमा चौड़ाई: 3px; } 100% {चौड़ाई: 0 पिक्सेल; मार्जिन-बाएं: 0 पिक्सेल; मार्जिन-दाएं: 0 पिक्सेल; सीमा चौड़ाई: 0 पिक्सेल; }} @ -एमएमएस-केफ्रेमों लपेटोकार्ड {0% {width: 250px; मार्जिन-बाएं: 10px; मार्जिन-दाएं: 10px; सीमा चौड़ाई: 3px; } 100% {चौड़ाई: 0 पिक्सेल; मार्जिन-बाएं: 0 पिक्सेल; मार्जिन-दाएं: 0 पिक्सेल; सीमा चौड़ाई: 0 पिक्सेल; }} @कीफ्रेमें लपेटकार्ड {0% {width: 250px; मार्जिन-बाएं: 10px; मार्जिन-दाएं: 10px; सीमा चौड़ाई: 3px; } 100% {चौड़ाई: 0 पिक्सेल; मार्जिन-बाएं: 0 पिक्सेल; मार्जिन-दाएं: 0 पिक्सेल; सीमा चौड़ाई: 0 पिक्सेल; }} यहां तत्व है:
.activity। Card.invisible {width: 0px; सीमा चौड़ाई: 0 पिक्सेल; मार्जिन: 0 पिक्स; अस्पष्टता: 0; -वेबकिट-एनिमेशन-नाम: hide_card; -मोझ-एनिमेशन-नाम: hide_card; एनिमेशन-नाम: hide_card; -वेबकिट-एनिमेशन-अवधि: 1 एस; -मोज़ एनीमेशन अवधि: 1 एस; एनीमेशन अवधि: 1 एस; -वेबकिट-एनीमेशन-पुनरावृत्ति-गणना: 1; -मोज़-एनीमेशन-पुनरावृत्ति-गणना: 1; एनीमेशन-चलना-गिनती: 1; } मेरी जावास्क्रिप्ट में, मैं JQuery का उपयोग करके अदृश्य वर्ग जोड़ रहा हूं, और तत्व छुपा हुआ (और वर्ग निरीक्षक में जोड़ा जाता है), लेकिन यह
किसी भी मदद की बहुत सराहना की जाएगी, = "Text">
हाँ, आपको कार्ड में एनीमेशन नियम जोड़ने की आवश्यकता है इससे पहले कि यह .अज्ञात वर्ग हो। इसलिए मुझे लगता है कि ऐसा कुछ दिखाई देगा: <प्री> .activity। Card {transition: all 1s easy 1s; चौड़ाई: 250px; मार्जिन-बाएं: 10px; मार्जिन-दाएं: 10px; सीमा चौड़ाई: 3px; } .activity.card.invisible {width: 0px; सीमा चौड़ाई: 0 पिक्सेल; मार्जिन: 0 पिक्स; अस्पष्टता: 0; } मैंने लघुकोड का इस्तेमाल किया और वेंडर उपसर्गों को छोड़ा ...
Comments
Post a Comment