CSS3 - डीओएम हटाने पर संक्रमण

Question

keyframes का उपयोग करके, डीओएम में जितनी जल्दी हो सके तत्व को एनिमेट करना संभव है।

@-moz-keyframes fadeIn { 
    from {opacity:0;} 
    to {opacity:1;} 
} 

@-webkit-keyframes fadeIn { 
    from {opacity:0;} 
    to {opacity:1;} 
} 

@keyframes fadeIn { 
    from {opacity:0;} 
    to {opacity:1;} 
} 

#box { 
    -webkit-animation: fadeIn 500ms; 
    -moz-animation: fadeIn 500ms; 
    animation: fadeIn 500ms; 
} 

है वहाँ कुछ इसी तरह की सुविधा उपलब्ध एक एनीमेशन एक तत्व को लागू करने के लिए (सीएसएस, कोई जावास्क्रिप्ट के माध्यम से) सही से पहले यह डोम से निकाल दिया जाता: कुछ नमूने यहां सीएसएस है? नीचे एक जेएसफ़िल्ड है जिसे मैंने इस विचार के साथ खेलने के लिए बनाया है; यदि आप समाधान के बारे में जानते हैं तो इसे फोर्क करने के लिए स्वतंत्र महसूस करें।

jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/

Answer 1

एक और सीएसएस fadeOut बुलाया एनीमेशन बनाएँ, का कहना है। फिर जब आप तत्व निकालना चाहते हैं, कि नई एनीमेशन के तत्व पर animation संपत्ति बदलने के लिए, और एक बार एनीमेशन किया जाता है animationend घटना का उपयोग तत्व की वास्तविक हटाने को गति प्रदान करने:

$('.hide').click(function() { 
    if (!$(this).hasClass('disabled')) { 
     $('#fill').css('-webkit-animation', 'fadeOut 500ms'); 
     $('#fill').bind('webkitAnimationEnd',function(){ 
      $('#fill').remove(); 
      $('.show, .hide').toggleClass('disabled'); 
     }); 
    } 
}); 

See also my updated version of your jsFiddle. यही काम करता है मेरे लिए सफारी में, कम से कम।

ठीक है, आपको उस .css() के बजाय कक्षा का उपयोग करना चाहिए।

मुझे नहीं लगता कि jQuery के पास अभी तक सीएसएस एनिमेशन के लिए कोई "वास्तविक" समर्थन है, इसलिए मुझे नहीं लगता कि आप webkitAnimationEnd से छुटकारा पा सकते हैं। फ़ायरफ़ॉक्स में इसे सिर्फ animationend कहा जाता है।

मुझे यकीन है कि बस सीएसएस में ऐसा करने का कोई तरीका नहीं है।

Answer 2

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

किसी भी घटक/डोम नोड को हटाने पर, जोड़ें 'हटाने' नामक एक वर्ग।

फिर सीएसएस में आप अपने एनीमेशन उस वर्ग का उपयोग कर परिभाषित कर सकते हैं:

.someElement.removing { 
    -webkit-animation: fadeOut 500ms; 
    -moz-animation: fadeOut 500ms; 
    animation: fadeOut 500ms; 
} 

और जावास्क्रिप्ट में वापस आ गया है, तो आप 'शब्द को हटा' वर्ग को जोड़ने के बाद, आप 'एनीमेशन के लिए जांच करने के लिए सक्षम होना चाहिए 'सीएसएस संपत्ति, और यदि यह मौजूद है, तो आप जानते हैं कि आप' एनीमेशन एंड 'पर हुक कर सकते हैं और यदि ऐसा नहीं होता है, तो तुरंत तत्व को हटा दें। मुझे कुछ समय पहले परीक्षण करना याद है, इसे काम करना चाहिए; मैं देखूंगा कि क्या मैं उदाहरण कोड खोद सकता हूं।

अद्यतन: मैं इस तकनीक को ऊपर खोदा और jQuery के लिए एक बहुत अच्छा प्लगइन है कि आप डोम तत्वों को हटाया जा रहा है के लिए CSS3 के एनिमेशन का उपयोग करने की अनुमति देता है लेखन शुरू कर दिया है। कोई अतिरिक्त जावास्क्रिप्ट आवश्यक नहीं: http://www.github.com/arthur5005/jquery.motionnotion

यह बहुत ही प्रयोगात्मक है, अपने जोखिम पर उपयोग करें, लेकिन कुछ मदद और प्रतिक्रिया पसंद करेंगे। :)

Answer 3

fadein और fadeout आप सीएसएस बदलाव नहीं सीएसएस एनिमेशन का उपयोग करना चाहिए की तरह कुछ के लिए आदर्श

..