प्रगति में सीएसएस संक्रमण को प्रभावित किए बिना तत्व से वर्गों को हटाकर

Question

ठीक है, मेरे पास ऐसी स्थिति है जहां मैंने मूल रूप से एक छोटी अधिसूचना ड्रॉपडाउन बॉक्स बनाया है जो तब होता है जब उपयोगकर्ता कुछ करता है, अंत में यह opacity: 0; स्थिति में संक्रमण होता है।

हालांकि, क्योंकि उपयोगकर्ता कुछ और क्लिक कर सकता है जो इस अधिसूचना बॉक्स को फिर से ट्रिगर करेगा, मैं किसी भी प्रगति में संक्रमण को प्रभावित किए बिना इसे सामान्य पर रीसेट करने का प्रयास कर रहा हूं और एनीमेशन को पूरा करने का प्रयास कर रहा हूं सीएसएसजावास्क्रिप्ट के बजाय।

CodePen:http://codepen.io/gutterboy/pen/WoEydg

HTML:

<a href="#">Open Notify Window</a> 

<div id="top_notify" class="top-notify"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="content col-xs-12"> 
       <div class="alert" role="alert"></div> 
      </div> 
     </div> 
    </div> 
</div> 

एससीएसएस:

body { 
    text-align: center; 
    padding-top: 150px; 
} 

.top-notify { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 9999; 

    .content { 
     text-align: center; 
     background-color: transparent; 
     transform-style: preserve-3d; 
    } 

    .alert { 
     display: inline-block; 
     transform: translateY(-100%); 
     min-width: 250px; 
     max-width: 500px; 
     border-top-left-radius: 0; 
     border-top-right-radius: 0; 

     &.visible { 
      transform: translateY(0%); 
      transition: 0.8s 0s, opacity 1s 3.8s; 
      opacity: 0; 
     } 

    } 

} 

जे एस:

$('a').on('click', function(e){ 
    e.preventDefault(); 
    myFunc(); 
}); 

function myFunc() { 

    // Set file to prepare our data 
    var loadUrl = "https://crossorigin.me/http://codepen.io/gutterboy/pen/ObjExz.html"; 

    // Run request 

    getAjaxData(loadUrl, null, 'POST', 'html') 

      .done(function(response) { 

       var alert_el = $('#top_notify').find('.alert'); 

       // Update msg in alert box 
       alert_el.text(response); 
       alert_el.addClass('alert-success'); 

       // Slide in alert box 
       alert_el.addClass('visible'); 

      }) 

      .fail(function() { 
       alert('Problem!!'); 
      }); 

    // End 

} 

function getAjaxData(loadUrl, dataObject, action, type) { 

    return jQuery.ajax({ 
     type: action, 
     url: loadUrl, 
     data: dataObject, 
     dataType: type 
    }); 

} 

मैं जानता हूँ कि मैं जे एस में ऐसा करके वापस सामान्य करने के इसे रीसेट कर सकते हैं:

$('#top_notify').find('.alert').removeClass().addClass('alert'); // The classes it ends up with vary 

... लेकिन ऐसा करने से पहले संक्रमण अस्पष्टता बाहर fading समाप्त हो गया है और यह सिर्फ गायब हो जाती है इस वर्गों को हटा तुरंत।

मुझे पता है कि मैं सीएसएस विलंब का सामना करने के लिए जेएस में देरी कर सकता हूं लेकिन ऐसा करने के लिए बस ऐसा करने का एक बहुत अच्छा तरीका प्रतीत नहीं होता है क्योंकि आपके पास 2 अलग-अलग स्थानों में समय है।

क्या सीएसएस द्वारा एनीमेशन को पूरा करते हुए मैं इसे पूरा कर सकता हूं या मुझे jQuery के animate का उपयोग करने के लिए आगे बढ़ना होगा ताकि एनीमेशन पूर्ण हो जाने पर मैं रीसेट प्रक्रिया चला सकूं?

Answer 1

ठीक है, मैं एक ठोस एक हेक्टेयर के साथ आने के बाद एक साधारण समाधान के साथ आया था।

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

var alert_el = $('#top_notify').find('.alert'); 

... ajax कॉल ऊपर,:

किसी भी तरह से, सरल समाधान बस इस कोड बढ़ रहा है।

तो यह तहत सीधे इस जोड़ने:

function myFunc() { 

    // Set file to prepare our data 
    var loadUrl = "https://crossorigin.me/http://codepen.io/gutterboy/pen/ObjExz.html"; 

    var alert_el = $('#top_notify').find('.alert'); 

    alert_el.removeClass('visible alert-success alert-info alert-danger alert-warning'); 

    // Run request 

    getAjaxData(loadUrl, null, 'POST', 'html') 

      .done(function(response) { 

       // Update msg in alert box 
       alert_el.text(response); 
       alert_el.addClass('alert-success'); 

       // Slide in alert box 
       alert_el.addClass('visible'); 

      }) 

      .fail(function() { 
       alert('Problem!!'); 
      }); 

    // End 

} 

CodePen:

alert_el.removeClass('visible alert-success alert-info alert-danger alert-warning'); 

पूर्ण समारोह कोड किया जा रहा है के साथ

http://codepen.io/gutterboy/pen/xRXbXy

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

यह के बाद एनीमेशन समाप्त हो गया है visible वर्ग को दूर नहीं करता लेकिन visible वर्ग (के रूप में वहाँ कोई रास्ता नहीं है कि मैं के बारे में पता जे एस सचेत करने के लिए इसके पूर्ण होने पर है) - जो मैं यदि का नाम बदल जाएगा आप इस विधि का उपयोग - कोई नई शैलियों को नहीं जोड़ते हैं, यह सिर्फ एनीमेशन चलाता है। ,

जावास्क्रिप्ट ऊपर समाधान के रूप में एक ही रहता है यह सीएसएस में सब है:

यहाँ है कैसे मैंने किया।

टीएलडीआर;

असल में रनटाइम के दौरान विभिन्न राज्यों को नियंत्रित करने के लिए मूल रूप से एकाधिक सीएसएस एनिमेशन का उपयोग करता है; नीचे कोड कोड।

.visible कक्षा में परिवर्तन और @keyframes के अतिरिक्त परिवर्तन।

.visible वर्ग:

&.visible { 
    animation: slideDown 0.8s 0s, keepThere 3s 0.8s, fadeAway 1s 3.8s; 
} 

आप देख सकते हैं कि हम मिल गया है किसी भी अतिरिक्त स्टाइल यहाँ से छुटकारा - यह जब एनीमेशन किया जाता है, यह अनिवार्य रूप से फिर सेट करता है वापस सामान्य, है जिसका अर्थ है हमें क्या चाहिऐ।

अब, चलो नीचे इस कोड को तोड़ने करते हैं:

हम 3 अलग एनिमेशन यहाँ चल रहे हैं और यह नोट करना वे एक के बाद एक नहीं चला महत्वपूर्ण है - जिसका अर्थ है कि वे जब तक एक यह जब तक समाप्त हो गया है प्रतीक्षा मत करो अगले एक को शुरू करता है, इसलिए हमें delay सेटिंग्स क्यों शामिल करने की आवश्यकता है।

तो पहले हम slideDown एनीमेशन के साथ शुरू:

slideDown 0.8s 0s

यदि आप सीएसएस में एनिमेशन के लिए नए हैं तो मूल रूप से क्या करता है 0s की देरी सेट से पहले यह चल रहा है और एनीमेशन रन शुरू होता है

@keyframes slideDown { 
    0% { 
     transform: translateY(-100%); 
    } 
    100% { 
     transform: translateY(0%); 
    } 
} 

तो, बहुत सरल है, बस उसे नीचेसे स्लाइड transform साथ: 0.8s के लिए, और इस एनीमेशन हैसे 0% और यह एनीमेशन 0.8s लेता है जैसा कि हम इस एनीमेशन में हमारे कॉल में सेट करते हैं।

अब, मैं इस 3 सेकंड के लिए दिखाई रहने के लिए इससे पहले कि यह दूर नहीं हो पाती शुरू कर दिया था, लेकिन हम एक समस्या है; एक बार जब एनीमेशन समाप्त हो जाता है तो यह वापस मानक स्टाइल पर जाता है, जो हमारे मामले में इसका मतलब है क्योंकि यह transform: translateY(-100%) पर वापस जाता है क्योंकि हमारे पास .visible कक्षा में कोई अतिरिक्त शैलियों नहीं है, और हम तब तक कोई अतिरिक्त शैलियों नहीं डाल सकते हम रीसेट करने में सक्षम नहीं होंगे, यह वापस मूल स्थिति (शैली के अनुसार) पर होगा।

लेकिन हम क्या करते हैं? fadeAway एनीमेशन किसी अन्य 3 सेकंड के लिए शुरू नहीं होता है और इस समय इसमें फीका दूर करने के लिए कुछ भी नहीं है (ठीक है, लेकिन आप इसे छुपाए हुए के रूप में नहीं देख सकते हैं)।

उस समाधान का समाधान एक और एनीमेशन जोड़ रहा था - जो तकनीकी रूप से कुछ भी वास्तव में एनिमेट नहीं करता है, यह fadeAway एनीमेशन शुरू होने तक इसे तब तक दिखाई देता है।

है यही कारण है कि जहां हम तक कैसे पहुंचे:

keepThere 3s 0.8s

अब, हमारा fadeAway एनीमेशन की सेटिंग याद कर रहे हैं: fadeAway 1s 3.8s इसका मतलब यह है कि हम 3 सेकंड है कि इससे पहले कि इस एनीमेशन शुरू और इसलिए पहले जा रहा है हम इसके साथ किसी भी स्टाइल को नियंत्रित कर सकते हैं।

ताकि जहां इन पैरामीटर मान में आता है - हम 0.8s को देरी सेट करें जिससे keepThere एनीमेशन शुरू नहीं करता है जब तक slideDown एक समाप्त हो गया है; फिर हम fadeAway एनीमेशन शुरू होता है जब तक प्रतीक्षा समय के लिए मुकाबला करने के लिए 3s के लिए अवधि निर्धारित है, और इस keepThere एनीमेशन है:

@keyframes keepThere { 
    0%, 100% { 
     transform: translateY(0%); 
    } 
} 

के बाद से यह एक ही आरंभ और अंत स्टाइल हम 0%, 100% में से एक चयनकर्ता में यह गठबंधन है और जैसा कि आप देख सकते हैं, यह वही करता है जो यह करता है, 3s की निर्धारित अवधि के लिए तत्व को दृश्यमान रखता है जब तक हम fadeAway एनीमेशन के साथ स्टाइल को नियंत्रित नहीं कर सकते।

मुझे लगता है कि तकनीकी रूप से आप अगर तुम क्या% 3 सेकंड के बराबर होती है पर गणित और इसलिए पता है जब तत्व दूर fading शुरू करना चाहती fadeAway एनीमेशन में इस कार्यक्षमता जोड़ सकता। अब

fadeAway 1s 3.8s

के रूप में हम ऊपर चर्चा की, हम पहले से ही 0.8s चलाने के लिए slideDown एनीमेशन अनुमति देने के लिए ऑफसेट और कारण है कि हम delay3.8s को निर्धारित किया है पता है,:

अन्त में हम fadeAway एनीमेशन है एक अतिरिक्त 3s देरी है क्योंकि हम कितना समय तक तत्व को तब तक दिखाना चाहते हैं जब तक कि यह समाप्त हो जाता है और फिर निश्चित रूप से फीका 1s पूरा करने के लिए लेता है।

इस के लिए एनीमेशन है:

@keyframes fadeAway { 
    0%, 100% { 
     transform: translateY(0%); 
    } 
    0% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 0; 
    } 
} 

अब, keepThere एनीमेशन पूरा कर लिया है के बाद से, हम तत्व दिखाई रखने के लिए इतना फीका कुछ दिखाई वास्तव में दूर नहीं हो पाती है सुनिश्चित करने के लिए है, इसलिए हम है शुरुआत से शुरू करने के लिए शैली के रूप में शैली transform: translateY(0%); को शामिल करना सुनिश्चित करें; उसके बाद यह स्पष्ट है कि यह क्या कर रहा है मुझे लगता है। निश्चित रूप से फिरhttp://codepen.io/gutterboy/pen/QGqwBg

इसे फिर से चलाने के लिए वर्ग फिर से जोड़े जाने के लिए है सक्षम होने के लिए है और इसलिए है कि था:

यह सब एक साथ रखो और आपको मिलता है:

.top-notify { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 9999; 

    .content { 
     text-align: center; 
     background-color: transparent; 
     transform-style: preserve-3d; 
    } 

    .alert { 
     display: inline-block; 
     transform: translateY(-100%); 
     min-width: 250px; 
     max-width: 500px; 
     border-top-left-radius: 0; 
     border-top-right-radius: 0; 

     &.visible { 
      animation: slideDown 0.8s 0s, keepThere 3s 0.8s, fadeAway 1s 3.8s; 
     } 

    } 

} 

@keyframes slideDown { 
    0% { 
     transform: translateY(-100%); 
    } 
    100% { 
     transform: translateY(0%); 
    } 
} 

@keyframes keepThere { 
    0%, 100% { 
     transform: translateY(0%); 
    } 
} 

@keyframes fadeAway { 
    0%, 100% { 
     transform: translateY(0%); 
    } 
    0% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 0; 
    } 
} 

CodePen प्रत्येक रन (एजेक्स कॉल से पहले) की शुरुआत में .visible कक्षा को हटाने का उद्देश्य और फिर जब यह AJAX कॉल के दौरान फिर से जोड़ा जाता है तो चलाता है। लिंक है कि मुझे इस पथ का नेतृत्व नीचे साझा करने के लिए @Nathaniel फ्लिक करने के लिए

धन्यवाद ठीक है :)

के साथ शुरू हो, उम्मीद है कि किसी देखकर के रूप में मैं अब उस विकल्प का उपयोग करने के लिए जा रहा हूँ के लिए काम में आता हा!