হোভারের পরে মাউসে কীভাবে কোনও অ্যানিমেশন বিপরীত করা যায়

Question 1

সুতরাং, মাউসগুলিতে বিপরীত অ্যানিমেশন থাকা যেমন সম্ভব:

.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/

Question 2

আমি মনে করি আপনার যদি একটি থাকে তবে 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+ থেকে সাফারি ব্যবহার করে
ফায়ারফক্স @keyframes16 সংস্করণ (v5-15 ব্যবহৃত @-moz-keyframes) থেকে ব্যবহার করে
অপেরা @-webkit-keyframes15-22 সংস্করণ ব্যবহার করে (কেবলমাত্র v12 ব্যবহৃত @-o-keyframes)
ইন্টারনেট এক্সপ্লোরার @keyframes10+ সংস্করণ থেকে ব্যবহার করে

সম্পাদনা:

আমি সেই ঝাঁকুনি নিয়ে এসেছি:

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

ন্যূনতম কোড ব্যবহার করা। আপনি কি প্রত্যাশা করছিলেন এটি কি কাছে পৌঁছেছে?

Question 3

এগুলির চেয়ে এটি অনেক সহজ: কেবলমাত্র আপনার উপাদানটিতে একই সম্পত্তি স্থানান্তর করুন

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

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

Question 4

আমি কেবল সিএসএস অ্যানিমেশন ব্যবহার করে এটি অর্জনযোগ্য বলে মনে করি না। আমি ধরে নিচ্ছি যে সিএসএস রূপান্তরগুলি আপনার ব্যবহারের ক্ষেত্রে পূর্ণ হয় না , কারণ (উদাহরণস্বরূপ) আপনি দুটি অ্যানিমেশন একসাথে চেইন করতে চান, একাধিক স্টপ, পুনরাবৃত্তি ব্যবহার করতে পারেন বা অন্য কোনও উপায়ে অতিরিক্ত পাওয়ার অ্যানিমেশনগুলি আপনাকে মঞ্জুর করে।

"ওভার" এবং "আউট" ক্লাস সংযুক্ত করার জন্য জাভাস্ক্রিপ্ট ব্যবহার না করে আমি বিশেষত মাউস-আউট-এ কোনও সিএসএস অ্যানিমেশনটি ট্রিগার করার কোনও উপায় পাইনি। যদিও আপনি বেস সিএসএস ডিক্লেয়ারেশনটি এনিমেশন ট্রিগার করতে ব্যবহার করতে পারেন: হোভার শেষ হয়ে গেলে, একই অ্যানিমেশনটি পৃষ্ঠা লোডে চলবে। "ওভার" এবং "আউট" ক্লাস ব্যবহার করে আপনি সংজ্ঞাটি বেস (লোড) ঘোষণা এবং দুটি অ্যানিমেশন-ট্রিগার ঘোষণায় বিভক্ত করতে পারেন।

এই সমাধানের জন্য সিএসএস হ'ল:

.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');
    }
);

Question 5

বিপরীত অ্যানিমেশন তৈরি করা সাধারণ সমস্যাটির জন্য ওভারকিল, যা আপনার প্রয়োজন need

animation-direction: reverse

তবে এটি নিজের মতো করে কাজ করবে না কারণ অ্যানিমেশন স্পেকটি এতটাই ডাম্প যে তারা অ্যানিমেশনটি পুনরায় চালু করার জন্য একটি উপায় যুক্ত করতে ভুলে গিয়েছিল তাই এখানে আপনি জেএসের সাহায্যে এটি কীভাবে করবেন

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>

স্নিপেট প্রসারিত করুন

Question 6

আপনি কি কেবল একটি অ্যানিমেশন রাখার চেয়ে আরও ভাল হতে পারেন, তবে এটির বিপরীত রয়েছে?

animation-direction: reverse

Question 7

আমরা অ্যানিমেশনটি পুনরায় সেট করতে অনুরোধঅ্যানিমেশন ফ্রেম ব্যবহার করতে পারি এবং যখন পরবর্তী ফ্রেমে ব্রাউজার পেইন্ট করে।

অ্যানিমেশন দিকটি বিপরীতমুখী করতে অনমাউসেন্টার এবং অনমাউসআউট ইভেন্ট হ্যান্ডলারগুলিও ব্যবহার করুন

যেমনটি

আপনার ইভেন্ট হ্যান্ডলারগুলিতে সারিবদ্ধ যে কোনও আরএএফ একই ফ্রেমে কার্যকর করা হবে। আরএএফ-এ সারিবদ্ধ যে কোনও আরএফকে পরবর্তী ফ্রেমে কার্যকর করা হবে।

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>

স্নিপেট প্রসারিত করুন

Question 8

এটা চেষ্টা কর:

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

ফায়ারফক্স 5+, আইই 10+, ক্রোম, সাফারি 4+, অপেরা 12+ এ সমর্থিত

Question 9

এখানে বেশ কয়েকটি সমাধান চেষ্টা করেছেন, কিছুই নির্দোষভাবে কাজ করেন নি; তারপরে https://greensock.com/ (লাইসেন্সের সাপেক্ষে, তবে এটি বেশিরভাগ অনুমতিপ্রাপ্ত) তে জিএসএপি সন্ধান করতে আরও কিছুটা ওয়েব অনুসন্ধান করেছেন ; আপনি একবার lib রেফারেন্স ...

 <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();
  });

এবং এটি নির্বিঘ্নে কাজ করবে।