जावास्क्रिप्ट डिस्प्ले CSS3 एनीमेशन के बाद कोई नहीं

Question

मेरे पास आईडी = 'मेनमेनू' के साथ div है। मैं बटन क्लिक के बाद जावास्क्रिप्ट द्वारा CSS3 संक्रमण जोड़ रहा हूं (#mainmenu में 'संक्रमण' जोड़कर और कक्षा बनाकर। Fadein और .fadeout जिसे div तत्व में जोड़ा जाएगा)। कोड:

<div id='mainmenu'></div> 
<button id="btn1">Click me1</button> 
<button id="btn2">Click me2</button> 

#mainmenu { 
    width:100px; 
    height:100px; 
    background:#eee; 
    -webkit-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    transition: opacity 1s; 
} 

.fadeout { 
    opacity:0; 
} 
.fadein { 
    opacity:1; 
} 


var menu = document.getElementById('mainmenu'), 
    btn1 = document.getElementById('btn1'), 
    btn2 = document.getElementById('btn2'); 

btn1.addEventListener('click', function() { 
    menu.className = 'fadeout'; 
} 
btn2.addEventListener('click', function() { 
    menu.className = 'fadein'; 
} 

समस्या यह है कि अब मैं डिस्प्ले को जोड़ना चाहता हूं और फीडआउट और फेडेन विकल्प को ब्लॉक करना चाहता हूं। तो बाद fadeout एनीमेशन div प्रदर्शन से कोई भी मिलना चाहिए, और प्रदर्शन ब्लॉक fadein के बाद:

btn1.addEventListener('click', function() { 
    menu.className = 'fadeout'; 
    menu.style.display = 'none'; 
} 
btn2.addEventListener('click', function() { 
    menu.className = 'fadein'; 
    menu.style.display = 'block'; 
} 

दुर्भाग्य से, प्रदर्शन कोई और ब्लॉक एनीमेशन के साथ निष्पादित करता है, तो एनीमेशन काम नहीं कर रहा (तत्व, प्रदर्शन कोई भी हो जाता है बिना अस्पष्टता एनीमेशन)। मैं पहले अस्पष्टता के साथ एनीमेशन चाहता हूं, और उसके बाद तत्व के लिए कोई भी ब्लॉक/ब्लॉक नहीं करता है। इसे करने का कोई तरीका है? मैं केवल शुद्ध जावास्क्रिप्ट (कोई jQuery आदि) का उपयोग कर सकते हैं।

Answer 1

आप क्रम में menu.style.display = "none"; साथ setTimeout() उपयोग करने के लिए फीका होने देना होता है यह काम है इससे पहले कि आप style.display को गति प्रदान करते हैं।

btn1.addEventListener('click', function() { 
    menu.className = 'fadeout'; 
    setTimeout(function() { 
     $(menu).css('display', 'none'); 
    }, 1000); 
} 
btn2.addEventListener('click', function() { 
    menu.className = 'fadein'; 
    setTimeout(function() { 
     $(menu).css('display', 'block'); 
    }, 1000); 
} 

Answer 2

मैं यहां गलत हो सकता हूं, हालांकि मुझे विश्वास है कि आपको एक संक्रमण-अंत ट्रिगर जोड़ने की आवश्यकता है जो प्रदर्शन करता है: ब्लॉक/डिस्प्ले: कोई भी परिवर्तन नहीं।

देखें: CSS3 transition events

Answer 3

एक संभावना transition-delay का उपयोग करना है। मैं इसे करने की कोशिश नहीं की है, लेकिन निम्नलिखित पर्याप्त हो सकता है:

.fadeout { 
    opacity:0; 
} 
.fadein { 
    opacity:1; 
    display: block; 
} 
.afterFadeOut { 
    transition-delay: 1s; 
    display: none; 
} 

और उसके बाद के लिए बाहर fading के लिए अपने वर्ग बदलने के लिए:

menu.className = 'fadeout afterFadeOut'; 

कि स्वचालित रूप से एक दूसरे के लिए display: none, के लिए पर्याप्त देरी चाहिए अस्पष्टता नीचे फीका है।

Answer 4

मैं कुछ मामलों के लिए प्रदर्शित करने के बजाय ऊंचाई 0 का उपयोग करता हूं लेकिन यह आपकी आवश्यकता के लिए लागू हो सकता है या नहीं भी हो सकता है।

1) संक्रमण का उपयोग करना (jQuerys fadeOut तरह दिखता है):

.fadeOut{ 
    opacity : 0; 
    height : 0; 
    transition : opacity 800ms, height 0 800ms; 
} 

क्या आप 0 भी चौड़ाई जोड़ सकते हैं चाहते हैं, तो वैसे भी यहाँ कोड है।

.fadeOut{ 
    opacity : 0; 
    width : 0; 
    height : 0; 
    transition : opacity 800ms, height 0 800ms, width 0 800ms; 
} 

2) का उपयोग करते हुए एनिमेशन (यह काम करता है, लेकिन बदलाव के लिए बेहतर है):

.fadeOut{ 
    animation : fadeout 800ms linear forwards; 
} 
@keyframes fadeout{ 
    99%{ 
    opacity : 0; 
    height : initial; 
    } 
    100%{ 
    opacity : 0; 
    height : 0; 
    } 
} 

Answer 5

हालांकि यह एक पुराने पोस्ट, भविष्य आगंतुक की खातिर है, तो आप transitionend घटना का उपयोग कर सकते हैं। आप उपयोग कर सकते हैं:

/*For when object has fully faded*/ 
 
menu.addEventListener("transitionend", function() { 
 
    if (this.className == "fadeout") { 
 
    this.style.display = "none"; 
 
    } 
 
}.bind(menu)); 
 

 
/*Show before animation starts*/ 
 
menu.addEventListener("click", function() { 
 
    this.style.display = "block"; 
 
}.bind(menu));