'सक्रिय' चयनकर्ता का उपयोग करने के बाद मेरे सीएसएस एनीमेशन को याद करने से कैसे रोकें?

Question

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

#button:active{ 
transform: translateX(20px); 
} 

और मैं काम नहीं करता हूं। यह सिर्फ इस चयनकर्ता को अनदेखा करता है। लेकिन मुझे पता चला कि इस चयनकर्ता को एनीमेशन नाम जोड़ने के बाद यह काम करता है। केवल तब ही समस्या यह है कि यह मेरी उछाल वाली एनीमेशन को दोहराता है। यह कोई नाम हो सकता है। यहां तक ​​कि एक एनीमेशन का नाम जो मौजूद नहीं है। उदाहरण के लिए:

#button:active{ 
transform: translateX(20px); 
animation-name: not_existing_animation; 
} 

और यही कारण है कि मुझे सहायता चाहिए। मैंने आपको अपनी समस्या को बेहतर तरीके से देखने के लिए एक पहेली बना दी: https://jsfiddle.net/gfd2pjbz/3/

Answer 1

मुझे इस एनीमेशन समस्या के बारे में एक समाधान मिला। मुझे नहीं पता कि यह आपके लिए काम करता है। लेकिन मुझे आपके Jsfiddle में कुछ coding समस्या मिली।

पहला कोडिंग समस्या।

आपने W3C नियमों का प्रवाह नहीं किया है। button एक बंद tag तत्व है। यह कोई भी <img /><br /> आदि

दूसरा codding मुद्दे की तरह tag तत्व को बंद नहीं कर रहा है।

आपको position दिशा CSS संपत्ति लिखना भूल गया है। position: fixed | absolute | sticky को left | right | top | bottom दिशा सेट करने की आवश्यकता है।

मैंने कई बार अपने पहेली का परीक्षण किया क्यों :activepseudo-classclicked के बाद काम नहीं करता है। आपकी पहली animation से समस्या मिली। animation और bounceInDownclasses में transform संपत्ति शामिल है। animation तब तक काम नहीं करेगा जब तक कि आप animation और bunceInDownclasses हटा दें। तो मुझे उन classes को हटाने के लिए function लिखने की आवश्यकता है।

$(function(){ 
    $('#button').on('click', function(){ 
     $(this).removeClass('animated bounceInDown'); 
    }); 
}); 

जब मैं उन classes मैंने देखा बटन की वजह से #button गायब हो गया है opacity:0; है हटा दिया। तो मुझे #button में opacity: 1; की आवश्यकता है।

$(function(){ 
    $('#button').on('click', function(){ 
     $(this).addClass('opacity-visible'); 
    }); 
}); 

अब एक और मुद्दा मिला। समस्या पहले click:activeanimation काम नहीं कर रही है। पहले click की वजह से transform संपत्ति animationclasses हटा दी गई है। फिर उन animationclasses को हटाते समय class जोड़ने की आवश्यकता है। जोड़े गए class:activeanimation काम करेगा।

$(function(){ 
    $('#button').on('click', function(){ 
     $(this).addClass('active'); 
    }); 
}); 

अब अगले clickedanimation के लिए button वापस मूल स्थान पर के लिए activeclass को दूर एक timeOutfunction के लिए सेट करना होगा। अब मैं एक साथ सभी function लिख सकता हूं।

$(function(){ 
    $('#button').on('click', function(){ 
    $(this).addClass('active opacity-visible'); 
    $(this).removeClass('animated bounceInDown'); 
    setTimeout(function(){ 
     $('#button').removeClass('active'); 
    }, 2000); 
    }); 
}); 

स्नैप की जांच की गई। मुझे उम्मीद है कि यह आपको सबसे अच्छा समाधान करने में मदद करेगा।

setTimeout(function(){ 
 
$("#button").addClass("animated bounceInDown"); 
 
}, 1000); 
 

 
$(function(){ 
 
\t $('#button').on('click', function(){ 
 
    \t $(this).addClass('active opacity-visible'); 
 
    $(this).removeClass('animated bounceInDown'); 
 
    setTimeout(function(){ 
 
    \t $('#button').removeClass('active'); 
 
    }, 2000); 
 
    }); 
 
});

*:focus{ 
 
    outline: none !important; 
 
} 
 
*{ 
 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 
 
} 
 
#button { 
 
    position: fixed; 
 
    background-color: green; 
 
    border: 2px solid rgba(0, 0, 0, 0.15); 
 
    border-radius: 4px; 
 
    color: white; 
 
    cursor: pointer; 
 
    height: 20%; 
 
    left: 0; 
 
    width: 20%; 
 
    top: 0; 
 
    opacity: 0; 
 
} 
 

 
#button:active{ 
 
    background-color: red; 
 
    transform: translateX(50%) !important; 
 
/* animation-name: not_existing_animation; */ 
 
} 
 
#button.opacity-visible{ 
 
    opacity: 1; 
 
    transition: transform 0.3s ease-in-out 0s; 
 
} 
 
#button.active{ 
 
    background-color: black; 
 
    transform: translateX(50%) !important; 
 
} 
 

 
/*! 
 
* animate.css -http://daneden.me/animate 
 
* Version - 3.5.2 
 
* Licensed under the MIT license - http://opensource.org/licenses/MIT 
 
* 
 
* Copyright (c) 2017 Daniel Eden 
 
*/ 
 

 
.bounceInDown { 
 
    animation-name: bounceInDown; 
 
    opacity: 1!important; 
 
} 
 

 

 
.animated { 
 
    animation-duration: 1s; 
 
    animation-fill-mode: both; 
 
} 
 

 
@keyframes bounceInDown { 
 
    from, 60%, 75%, 90%, to { 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    } 
 

 
    0% { 
 
    opacity: 0; 
 
    transform: translate3d(0, -3000px, 0); 
 
    } 
 

 
    60% { 
 
    opacity: 1; 
 
    transform: translate3d(0, 25px, 0); 
 
    } 
 

 
    75% { 
 
    transform: translate3d(0, -10px, 0); 
 
    } 
 

 
    90% { 
 
    transform: translate3d(0, 5px, 0); 
 
    } 
 

 
    to { 
 
    transform: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="button">Click Me</button>

मैं सुझाव है कि आप करने के लिए animation के इस प्रकार के लिए :activecss बारे में नहीं है। MDN पर अधिक विनिर्देशन।

Answer 2

मुझे आपके लिए एक शानदार ठंडा समाधान मिला।

पहले पूर्वावलोकन देखने:https://codepen.io/ziruhel/pen/aVjGMY

अलग प्रारंभिक opacity एक वर्ग के लिए और अपने बटन को इस वर्ग में जोड़ें।

तरह:

<button id="button" class="visibility"/> 

और सीएसएस:

.visibility { 
    opacity: 0; 
} 

अब एनीमेशन को हटाने और अपनी इच्छा को बदलने जब बटन :active इस कोड के द्वारा होता है:

#button:active { 
    transform: translate3d(20px, 0, 0); 
    /* transform: translateX(20px); you can also use this */ 
    animation-name: none; 
} 

अब यह सही से अनुवाद करेगा, लेकिन बाउंसिंग अभी भी बनी हुई है। इस बाउंसिंग को हटाने के लिए यह करें:

$(document).on("click", "#button", function() { 
    $(this).removeClass("animated bounceInDown visibility"); 
}); 

यह एनीमेशन को हटा देगा जो आपने पहली बार लोड या प्रारंभ करने के दौरान जोड़ा था।

Answer 3

वर्ग को उछालने के लिए आप Promise का उपयोग कर सकते हैं। नीचे स्निपेट में मामूली सीएसएस संशोधन भी देखें।

var p = new Promise(function(resolve, reject) { 
 
    var $timeout = setTimeout(function() { 
 
    document.getElementById("button").classList.add("animated", "bounceInDown"); 
 
    }, 1000); 
 
    if ($timeout) { 
 
    resolve($timeout); 
 
    } else { 
 
    reject('Failure!'); 
 
    } 
 
}); 
 
p.then(function(response) { 
 
    if (response) { 
 
    setTimeout(function() { 
 
     document.getElementById("button").classList.remove("bounceInDown"); 
 
     console.log("Yay! finished"); 
 
    }, 1900); 
 
    } 
 

 
}).catch(function() { 
 
    console.log("Something went wrong"); 
 
});

#button { 
 
    position: fixed; 
 
    height: 20%; 
 
    width: 20%; 
 
    opacity: 0; 
 
} 
 

 
button.animated:active, 
 
button.animated:focus { 
 
    transform: translateX(20px); 
 
    background-color: red; 
 
} 
 

 
.bounceInDown { 
 
    animation-name: bounceInDown; 
 
    opacity: 1!important; 
 
    animation-fill-mode: both; 
 
    animation-duration: 1s; 
 
} 
 

 
.animated { 
 
    background-color: green; 
 
    opacity: 1!important; 
 
    transition: transform 2s, background-color 1s; 
 
} 
 

 
@keyframes bounceInDown { 
 
    from, 
 
    60%, 
 
    75%, 
 
    90%, 
 
    to { 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    } 
 
    0% { 
 
    opacity: 0; 
 
    transform: translate3d(0, -3000px, 0); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    transform: translate3d(0, 25px, 0); 
 
    } 
 
    75% { 
 
    transform: translate3d(0, -10px, 0); 
 
    } 
 
    90% { 
 
    transform: translate3d(0, 5px, 0); 
 
    } 
 
    to { 
 
    transform: none; 
 
    } 
 
}

<button id="button" />