javascript w3schools वर्ग हटाने पर एक सीएसएस एनीमेशन को रिवर्स करना संभव है?




w3schools javascript (4)

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

यहाँ फिडेल: http://jsfiddle.net/bmh5g/

जैसा कि आप फिडल में देख सकते हैं, जब आप "हॉवर मी" बटन को #item करते हैं, तो #item फ़्लिप हो जाता है। जब आप होवर बटन को दबाते हैं, तो #item बस गायब हो जाता है। मैं चाहता हूं कि #item फ्लिप-अप हो जाए (आदर्श रूप में एक ही एनीमेशन का उपयोग करके लेकिन रिवर्स में)। क्या यह संभव है?

HTML:

<div id='trigger'>Hover Me</div>
<div id='item'></div>

सीएसएस:

#item
{
    position: relative;
    height: 100px;
    width: 100px;
    background: red;

    -webkit-transform: perspective(350px) rotateX(-90deg);
    transform: perspective(350px) rotateX(-90deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

#item.flipped
{
    animation: flipper 0.7s;
    animation-fill-mode: forwards;
    -webkit-animation: flipper 0.7s;
    -webkit-animation-fill-mode: forwards;
}

@keyframes flipper
{
    0% { transform: perspective(350px) rotateX(-90deg); }
    33% { transform: perspective(350px) rotateX(0deg); }
    66% { transform: perspective(350px) rotateX(10deg); }
    100% { transform: perspective(350px) rotateX(0deg); }
}

@-webkit-keyframes flipper
{
    0% { -webkit-transform: perspective(350px) rotateX(-90deg); }
    33% { -webkit-transform: perspective(350px) rotateX(0deg); }
    66% { -webkit-transform: perspective(350px) rotateX(10deg); }
    100% { -webkit-transform: perspective(350px) rotateX(0deg); }
}

जावास्क्रिप्ट:

$('#trigger').on({
    mouseenter: function(){
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
    }
})

मैं डिफ़ॉल्ट रूप से रिवर्स एनीमेशन के साथ छिपा हुआ #item शुरू होगा। फिर इसे एनीमेशन देने के लिए वर्ग जोड़ें और #itemhttp://jsfiddle.net/bmh5g/12/

jQuery

$('#trigger').on({
    mouseenter: function(){
        $('#item').show();
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
    }
});

सीएसएस

#item
{
    position: relative;
    height: 100px;
    width: 100px;
    background: red;
    display: none;
    -webkit-transform: perspective(350px) rotateX(-90deg);
    transform: perspective(350px) rotateX(-90deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    animation: flipperUp 0.7s;
    animation-fill-mode: forwards;
    -webkit-animation: flipperUp 0.7s;
    -webkit-animation-fill-mode: forwards;
}

MDN से सीएसएस समाधान और लगभग सभी ब्राउज़र द्वारा समर्थित

.प्रकाशन (एनिमेशननाम 10 s आसानी से इन-आउट दोनों वैकल्पिक चल रहा है;)


यहाँ जवाब के अलावा, कृपया अपने $(selector) कैश $(selector)

तो आप बहुत अधिक इस var elements = $(selector); कैश करने के लिए।

क्यूं कर?! क्योंकि यदि आप इस पृष्ठ के उत्तरों में कोड का उपयोग करते हैं जैसा कि आप हर बार उसी तत्व संग्रह ( $('#item') लिए DOM पूछेंगे $('#item') । DOM रीडिंग एक महंगा ऑपरेशन है।

उदाहरण के लिए, स्वीकृत उत्तर कुछ इस तरह दिखाई देगा:

var item = $('#item');
$('#trigger').on({
    mouseenter: function(){
        item.show();
        item.addClass('flipped');
    },
    mouseleave: function(){
        item.removeClass('flipped');
    }
});

चूंकि मैंने यह सब पाठ लिखा है, इसलिए सीएसएस बदलावों का उपयोग करके आपके प्रश्न का उत्तर दे सकता हूं

मुझे पता है कि आपने सीएसएस एनिमेशन उदाहरण के लिए पूछा था, लेकिन एनीमेशन के लिए जो आप करना चाहते थे (एक कार्ड फ़्लिपिंग ओपन), इसे सीएसएस ट्रांज़िशन का उपयोग करके आसानी से प्राप्त किया जा सकता है:

#item {
  width: 70px;
  height: 70px;
  background-color: black;
  line-height: 1;
  color: white;
}

#item+div {
  width: 70px;
  height: 100px;
  background-color: blue;
  transform: perspective(250px) rotateX(-90deg);
  transform-origin: 50% 0%;
  transition: transform .25s ease-in-out
}

#item:hover+div {
  transform: perspective(250px) rotateX(0);
}
<div id="item"></div>
<div></div>


display: none का उपयोग करने के बजाय एक और दृष्टिकोण display: none , पृष्ठ लोड पर एक वर्ग के साथ रिवर्स एनीमेशन को दबाने के लिए है, और फिर उस कक्षा को उसी घटना के साथ हटा दें जो सामान्य एनीमेशन (जैसे: फ्लिपर) पर लागू होती है। जैसे ( http://jsfiddle.net/astrotim/d7omcbrz/1/ ):

सीएसएस - ऊपर ब्लेक द्वारा पोस्ट किए गए फ़्लिपरुप कीफ्रेम के अतिरिक्त

#item.no-animation 
{
  animation: none;
}

jQuery

$('#trigger').on({
    mouseenter: function(){
        $('#item').removeClass('no-animation');
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
    }
})






css3