Cách đảo ngược hoạt ảnh khi di chuột ra sau khi di chuột

91

Vì vậy, có thể có hoạt ảnh ngược khi di chuột ra ngoài chẳng hạn như:

.class{
   transform: rotate(0deg);

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

nhưng, khi sử dụng hoạt ảnh @keyframes, tôi không thể làm cho nó hoạt động, ví dụ:

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

Giải pháp tối ưu là gì, biết rằng tôi cần lặp lại và tự hoạt ảnh?

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

css  animation 
— Khaled
nguồn
Sẽ không tốt hơn nếu sử dụng chuyển tiếp, như ở đây - jsfiddle.net/HQFby ?
— piatek
Câu trả lời đã được đăng trên stackoverflow. nhập mô tả liên kết ở đây
— watereffect

Câu trả lời:

61

Tôi nghĩ rằng nếu bạn có a to, bạn phải sử dụng a from. Tôi sẽ nghĩ về một cái gì đó như:

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

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

Tất nhiên phải kiểm tra nó rồi, nhưng tôi thấy lạ là bạn chỉ sử dụng thuộc transformtính vì CSS3 không được triển khai đầy đủ ở mọi nơi. Có thể nó sẽ hoạt động tốt hơn với những cân nhắc sau:

  • Chrome sử dụng @-webkit-keyframes, không cần phiên bản đặc biệt
  • Safari sử dụng @-webkit-keyframeskể từ phiên bản 5+
  • Firefox sử dụng @keyframeskể từ phiên bản 16 (v5-15 được sử dụng @-moz-keyframes)
  • Opera sử dụng @-webkit-keyframesphiên bản 15-22 (chỉ sử dụng v12 @-o-keyframes)
  • Internet Explorer sử dụng @keyframestừ phiên bản 10+

BIÊN TẬP :

Tôi đã nghĩ ra rằng:

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

Sử dụng mã tối thiểu. Nó có đang tiếp cận những gì bạn mong đợi không?

— Xaltar
nguồn
1
IE 10 không hỗ trợ hoạt ảnh khung hình chính.
— dlev
4
Điều đó làm hoàn nguyên quá trình chuyển đổi, nhưng vấn đề là nếu chuột ra ngoài trước khi kết thúc chuyển đổi di chuột, chúng tôi nhận được "bước nhảy" này. Sau một số tìm kiếm, rõ ràng trạng thái của phần tử phải được "duy trì" để chúng tôi có thể hoàn nguyên từ vị trí xoay cuối, đối với "animation-fill-mode: forwards;" có thể được sử dụng, nhưng nó dường như không hoạt động.
— Khaled
21
@Xaltar Khi bạn tải ứng dụng lần đầu, hoạt ảnh đầu tiên sẽ phát mà không cần di chuột qua hình vuông. Có cách nào để ngăn hoạt ảnh tải ban đầu đó xảy ra không?
— jlewkovich
2
Có ai tìm ra giải pháp cho hoạt ảnh đầu tiên tự phát sau khi làm mới không? Loại quan trọng.
— dùng2619824
1
Câu trả lời này là cuối cùng vô dụng nếu bạn không thể ngăn chặn các hình ảnh động chơi lần đầu tiên
— NearHuscarl
19

Nó dễ dàng hơn nhiều so với tất cả điều này: Chỉ cần chuyển đổi cùng một thuộc tính trên phần tử của bạn 

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

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

— Jordan Lafland
nguồn
4
Vâng, nhưng điều này sẽ chỉ hoạt động nếu chỉ có một thuộc tính được thay đổi.
— Marcus
4
@Marcustransition: border-color 0.3s, background-color 0.3s, color 0.3s;
— Scoots
4
Woah, CSS có đi một chặng đường dài kể từ lần cuối cùng tôi đã làm một số lập trình web: D
— Franz D.
5
anh ấy đang hỏi về hoạt hình !!
— iKamy
18

Tôi không nghĩ rằng điều này có thể đạt được chỉ bằng cách sử dụng hoạt ảnh CSS. Tôi giả định rằng các chuyển tiếp CSS không đáp ứng được trường hợp sử dụng của bạn, bởi vì (ví dụ) bạn muốn liên kết hai hoạt ảnh lại với nhau, sử dụng nhiều điểm dừng, lặp lại hoặc theo một cách nào đó khai thác các hoạt ảnh bổ sung sức mạnh cho bạn.

Tôi không tìm thấy bất kỳ cách nào để kích hoạt hoạt ảnh CSS cụ thể khi di chuột ra ngoài mà không sử dụng JavaScript để đính kèm các lớp "over" và "out". Mặc dù bạn có thể sử dụng khai báo CSS cơ sở để kích hoạt hoạt ảnh khi: hover kết thúc, hoạt ảnh đó sau đó sẽ chạy khi tải trang. Sử dụng các lớp "over" và "out", bạn có thể chia định nghĩa thành khai báo cơ sở (tải) và hai khai báo kích hoạt hoạt ảnh.

CSS cho giải pháp này sẽ là:

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

Và sử dụng JavaScript (cú pháp jQuery) để liên kết các lớp với các sự kiện:

$(".class").hover(
    function () {
        $(this).removeClass('out').addClass('over');
    },
    function () {
        $(this).removeClass('over').addClass('out');
    }
);
— Giles Copp
nguồn
8

tạo hoạt ảnh đảo ngược hơi quá mức cần thiết đối với một vấn đề đơn giản, điều bạn cần là 

animation-direction: reverse

tuy nhiên điều này sẽ không tự hoạt động vì thông số hoạt ảnh bị kết xuất đến mức họ quên thêm cách khởi động lại hoạt ảnh, vì vậy đây là cách bạn thực hiện với sự trợ giúp của 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>
Mở rộng đoạn mã

— ctf0
nguồn
3

chúng ta có thể sử dụng requestAnimationFrame để đặt lại hoạt ảnh và đảo ngược nó khi trình duyệt vẽ trong khung tiếp theo.

Đồng thời sử dụng trình xử lý sự kiện onmouseent và onmouseout để đảo ngược hướng hoạt ảnh

Theo

Bất kỳ rAF nào được xếp hàng đợi trong trình xử lý sự kiện của bạn sẽ được thực thi trong cùng một khung. Mọi rAF được xếp hàng trong một rAF sẽ được thực thi trong khung tiếp theo.

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>
Mở rộng đoạn mã

— Shishir Arora
nguồn
0

Thử đi:

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

được hỗ trợ trong Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+

— Ansipants
nguồn
0

Đã thử một số giải pháp ở đây, không có gì hoạt động hoàn hảo; sau đó Tìm kiếm trên web thêm một chút, để tìm GSAP tại https://greensock.com/ (tùy thuộc vào giấy phép, nhưng nó khá dễ dãi ); khi bạn tham chiếu lib ...

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

... bạn có thể đi:

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

Và nó sẽ hoạt động hoàn hảo.

— Razvan_TK9692
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.