होवर के बाद माउस पर एक एनीमेशन को कैसे रिवर्स करें

Question

तो, माउस पर रिवर्स एनीमेशन होना संभव है जैसे:

.class{
   transform: rotate(0deg);

}
.class:hover{
   transform: rotate(360deg);
}

लेकिन, @keyframes एनीमेशन का उपयोग करते समय, मैं इसे काम करने के लिए नहीं मिला, जैसे:

.class{
   animation-name: out;
   animation-duration:2s;

}
.class:hover{
   animation-name: in;
   animation-duration:5s;
   animation-iteration-count:infinite;

}
@keyframe in{
    to {transform: rotate(360deg);}
}

@keyframe out{
    to {transform: rotate(0deg);}
}

इष्टतम समाधान क्या है, यह जानते हुए कि मुझे पुनरावृत्तियों और एनीमेशन की आवश्यकता होगी?

http://jsfiddle.net/khalednabil/eWzBm/

Comments

क्या संक्रमणों का उपयोग करना बेहतर नहीं होगा, जैसे यहाँ - jsfiddle.net/HQFby ?

— पियाटेक

जवाब पहले से ही stackoverflow पर पोस्ट किया गया है। यहाँ लिंक विवरण दर्ज करें

— वियरेक्ट

Answer 1

मुझे लगता है कि यदि आपके पास एक है to, तो आपको एक का उपयोग करना चाहिए from। मैं कुछ इस तरह से सोचूंगा:

@keyframe in {
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@keyframe out {
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

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

• क्रोम का उपयोग करता है @-webkit-keyframes, कोई कण संस्करण की जरूरत नहीं है
• @-webkit-keyframesसंस्करण 5+ के बाद से सफारी का उपयोग किया जाता है
• फ़ायरफ़ॉक्स @keyframesसंस्करण 16 (v5-15 प्रयुक्त @-moz-keyframes) के बाद से उपयोग करता है
• ओपेरा @-webkit-keyframes15-22 संस्करण का उपयोग करता है (केवल v12 का उपयोग किया जाता है @-o-keyframes)
• Internet Explorer @keyframesसंस्करण 10+ के बाद से उपयोग करता है

संपादित करें:

मैं उस बेला के साथ आया:

http://jsfiddle.net/JjHNG/35/

न्यूनतम कोड का उपयोग करना। क्या यह वही है जो आप उम्मीद कर रहे थे?

Comments

IE 10 keyframe एनिमेशन का समर्थन करता है।

— dlev

यह संक्रमण को वापस करता है, लेकिन समस्या यह है कि यदि माउस हॉवर संक्रमण के अंत से पहले बाहर हो जाता है तो हमें यह "कूद" मिलता है। कुछ खोज के बाद स्पष्ट रूप से तत्व की स्थिति "निरंतर" होनी चाहिए ताकि हम अंत रोटेशन की स्थिति से वापस आ सकें, इसके लिए "एनीमेशन-फिल-मोड: फॉरवर्ड;" इस्तेमाल किया जा सकता है, लेकिन यह काम नहीं करता है।

— खालिद

@Xaltar जब आप पहली बार ऐप को लोड करते हैं, तो पहला एनीमेशन स्क्वायर पर मँडराए बिना चलता है। वहाँ है कि प्रारंभिक लोड एनीमेशन को रोकने के लिए वैसे भी है?

— जलेविकोविच

क्या किसी ने ताज़ा करने के बाद अपने दम पर खेल रहे पहले एनीमेशन का हल खोजा? महत्वपूर्ण की तरह।

— user2619824

यदि आप पहली बार खेल रहे एनीमेशन को दबा नहीं सकते तो यह उत्तर अंततः बेकार है

— नियरहस्कल

Answer 2

यह सब से ज्यादा आसान है: बस अपने तत्व पर एक ही संपत्ति संक्रमण

.earth { width:  0.92%;    transition: width 1s;  }
.earth:hover { width: 50%; transition: width 1s;  }

https://codepen.io/lafland/pen/MoEaoG

Comments

हाँ, लेकिन यह केवल तभी काम करेगा जब केवल एक संपत्ति को बदल दिया जाए।

— मार्कस

@ मारकसtransition: border-color 0.3s, background-color 0.3s, color 0.3s;

— स्कूटर

वाह, सीएसएस ने एक लंबा सफर तय किया है पिछली बार जब मैंने कुछ वेब प्रोग्रामिंग की थी: डी

— फ्रांज डी।

वह एनीमेशन के बारे में पूछ रहा है !!

— iKamy

Answer 3

मुझे नहीं लगता कि यह केवल सीएसएस एनिमेशन का उपयोग करके प्राप्त करने योग्य है। मैं यह मान रहा हूं कि सीएसएस संक्रमण आपके उपयोग के मामले को पूरा नहीं करते हैं, क्योंकि (उदाहरण के लिए) आप दो एनिमेशनों को एक साथ चेन करना चाहते हैं, कई स्टॉप्स, पुनरावृत्तियों का उपयोग करते हैं, या किसी अन्य तरीके से अतिरिक्त पावर एनिमेशन आपको फायदा देते हैं।

मैंने "ओवर" और "आउट" कक्षाओं को संलग्न करने के लिए जावास्क्रिप्ट का उपयोग किए बिना विशेष रूप से माउस-आउट पर सीएसएस एनीमेशन को ट्रिगर करने का कोई तरीका नहीं पाया है। यद्यपि आप आधार सीएसएस घोषणा ट्रिगर एनीमेशन का उपयोग कर सकते हैं: जब होवर समाप्त होता है, तो वही एनीमेशन तब पृष्ठ लोड पर चलेगा। "ओवर" और "आउट" कक्षाओं का उपयोग करके आप परिभाषा को आधार (लोड) घोषणा और दो एनीमेशन-ट्रिगर घोषणाओं में विभाजित कर सकते हैं।

इस समाधान के लिए सीएसएस होगा:

.class {
    /* base element declaration */
}
.class.out {
   animation-name: out;
   animation-duration:2s;

}
.class.over {
   animation-name: in;
   animation-duration:5s;
   animation-iteration-count:infinite;
}
@keyframes in {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes out {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

और घटनाओं के लिए वर्गों को बांधने के लिए जावास्क्रिप्ट (jQuery वाक्यविन्यास) का उपयोग करना:

$(".class").hover(
    function () {
        $(this).removeClass('out').addClass('over');
    },
    function () {
        $(this).removeClass('over').addClass('out');
    }
);

Answer 4

उलटा एनीमेशन बनाना थोड़े सरल समस्या के लिए एक ओवरकिल है, जिसे यू की आवश्यकता है

animation-direction: reverse

हालाँकि यह अपने आप पर काम नहीं करेगा क्योंकि एनीमेशन युक्ति इतनी डंप है कि वे एनीमेशन को पुनरारंभ करने का एक तरीका जोड़ना भूल गए हैं, इसलिए यहां बताया गया है कि आप इसे js की मदद से कैसे करते हैं

let item = document.querySelector('.item')

// play normal
item.addEventListener('mouseover', () => {
  item.classList.add('active')
})

// play in reverse
item.addEventListener('mouseout', () => {
  item.style.opacity = 0 // avoid showing the init style while switching the 'active' class

  item.classList.add('in-active')
  item.classList.remove('active')

  // force dom update
  setTimeout(() => {
    item.classList.add('active')
    item.style.opacity = ''
  }, 5)

  item.addEventListener('animationend', onanimationend)
})

function onanimationend() {
  item.classList.remove('active', 'in-active')
  item.removeEventListener('animationend', onanimationend)
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

div {
  background: black;
  padding: 1rem;
  display: inline-block;
}

.item {
  /* because span cant be animated */
  display: block;
  color: yellow;
  font-size: 2rem;
}

.item.active {
  animation: spin 1s forwards;
  animation-timing-function: ease-in-out;
}

.item.in-active {
  animation-direction: reverse;
}

<div>
  <span class="item">ABC</span>
</div>

Answer 5

आप सिर्फ एक एनीमेशन होने से बेहतर होगा, लेकिन यह रिवर्स होने?

animation-direction: reverse

Comments

वर्तमान में केवल कुछ ब्राउज़रों

— एडम हचिंसन

कोई उदाहरण है?

— एमडी आशिक

Answer 6

जब हम ब्राउज़र को अगले फ्रेम में पेंट करते हैं, तो हम एनीमेशन को रीसेट करने के लिए requestAnimationFrame का उपयोग कर सकते हैं और इसे उल्टा कर सकते हैं।

एनीमेशन दिशा को उलटने के लिए ऑनमाउंटर और ऑनमाउट इवेंट हैंडलर का भी उपयोग करें

के अनुसार

आपके घटना संचालकों में कतारबद्ध किसी भी rAF को एक ही फ्रेम में निष्पादित किया जाएगा। एक rAF में पंक्तिबद्ध किसी भी rAF को अगले फ्रेम में निष्पादित किया जाएगा।

function fn(el, isEnter) {
  el.className = "";
   requestAnimationFrame(() => {
    requestAnimationFrame(() => {
        el.className = isEnter? "in": "out";
    });
  });  
}

.in{
  animation: k 1s forwards;
}

.out{
  animation: k 1s forwards;
  animation-direction: reverse;
}

@keyframes k
{
from {transform: rotate(0deg);}
to   {transform: rotate(360deg);}
}

<div style="width:100px; height:100px; background-color:red" 
  onmouseenter="fn(this, true)"
   onmouseleave="fn(this, false)"  
     ></div>

Answer 7

इसे इस्तेमाल करे:

@keyframe in {
from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframe out {
from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

फ़ायरफ़ॉक्स 5+, IE 10+, क्रोम, सफारी 4+, ओपेरा 12+ में समर्थित है

Answer 8

यहां कई समाधानों की कोशिश की है, कुछ भी त्रुटिपूर्ण काम नहीं किया है; फिर वेब को थोड़ा और खोजा, https://greensock.com/ पर GSAP को खोजने के लिए (लाइसेंस के अधीन, लेकिन यह बहुत अनुमित है); एक बार जब आप लिबर का संदर्भ लें ...

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>

... तुम जा सकते हो:

  var el = document.getElementById('divID');    

  // create a timeline for this element in paused state
  var tl = new TimelineMax({paused: true});

  // create your tween of the timeline in a variable
  tl
  .set(el,{willChange:"transform"})
  .to(el, 1, {transform:"rotate(60deg)", ease:Power1.easeInOut});

  // store the tween timeline in the javascript DOM node
  el.animation = tl;

  //create the event handler
  $(el).on("mouseenter",function(){
    //this.style.willChange = 'transform';
    this.animation.play();
  }).on("mouseleave",function(){
     //this.style.willChange = 'auto';
    this.animation.reverse();
  });

और यह निर्दोष रूप से काम करेगा।