Di chuột nhận biết hướng jQuery với quá trình chuyển đổi CSS3

Question

Tôi đang gặp khó khăn để nhận chuyển tiếp di chuột và css định hướng để hoạt động chính xác. Về cơ bản tôi đang cố gắng để có một mạng lưới các yếu tố với một mặt trước và mặt sau, và khi di chuột có một quá trình chuyển đổi css để lật yếu tố đó để hiển thị mặt sau.

dụ chuyển tiếp (không có hướng-aware): fiddle

Như bạn thấy, không có vấn đề mà cách chuột vào một yếu tố nó luôn luôn flips lên. Tôi muốn nó lật bất cứ cách nào chuột vào/ra.

Ví dụ:

Và đây là nỗ lực của tôi với hướng-aware: fiddle

Tôi đang sử dụng jQuery để thêm các lớp liên quan đến chuột theo hướng ra/vào.

.hover-in-top {} 
.hover-in-right {} 
.hover-in-bottom {} 
.hover-in-left {} 

.hover-out-top {} 
.hover-out-right {} 
.hover-out-bottom {} 
.hover-out-left {} 

Như bạn có thể thấy từ ví dụ nhận biết hướng nó hoạt động nhưng có những trục trặc lớn mà tôi không thể làm tròn đầu. (Tôi đã đánh giá cao điều này và bộ não của tôi vừa bị nổ tung.)

Dù sao tôi hy vọng điều này có ý nghĩa. Cảm ơn.

Answer 1

Tôi tin rằng cách tốt nhất để tiếp cận vấn đề là không sử dụng chuyển tiếp CSS.

Bạn có thể dễ dàng triển khai nó bằng cách sử dụng jQuery animate, sử dụng hàng đợi hoạt ảnh jQuery để giữ tất cả các hình động của bạn được đồng bộ hóa.

Tôi đã sửa đổi ví dụ của bạn để tạo hiệu ứng chuyển tiếp trong JavaScript.

Code example

Answer 2

Tôi có giải pháp một phần cho câu hỏi của bạn.

Nhưng tôi cần phải thay đổi một số các hiệu ứng chuyển tiếp đến hình ảnh động

$('.box-container .box').each(function() { 
 
    $(this).on('mouseenter mouseleave', function(e) { 
 
     var $this = $(this), 
 
      width = $this.width(), 
 
      height = $this.height(); 
 

 
     var x = (e.pageX - $this.offset().left - (width/2)) * (width > height ? (height/width) : 1), 
 
      y = (e.pageY - $this.offset().top - (height/2)) * (height > width ? (width/height) : 1); 
 

 
     // top = 0, right = 1, bottom = 2, left = 3 
 
     var dir_num = Math.round((((Math.atan2(y, x) * (180/Math.PI)) + 180)/90) + 3) % 4, 
 
      directions = ['top', 'right', 'bottom', 'left']; 
 

 
     // If mouse enter 
 
     if (e.type === 'mouseenter') { 
 
      // Remove all hover out classes 
 
      $this.removeClass(function(index, css) { 
 
       return (css.match(/(^|\s)hover-out-\S+/g) || []).join(' '); 
 
      }); 
 

 
      // Add in direction class 
 
      $this.addClass('hover-in-' + directions[dir_num]); 
 
     } 
 

 

 
     // If mouse leave 
 
     if (e.type === 'mouseleave') { 
 
      // Remove all hover in classes 
 
      $this.removeClass(function(index, css) { 
 
       return (css.match(/(^|\s)hover-in-\S+/g) || []).join(' '); 
 
      }); 
 

 
      // Add out direction class 
 
      $this.addClass('hover-out-' + directions[dir_num]); 
 
     } 
 
    }); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.box-container { 
 
    padding: 20px; 
 
    width: 600px; 
 
} 
 
.box-container:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 
.box-container .box { 
 
    float: left; 
 
    width: 50%; 
 
    height: 200px; 
 
    position: relative; 
 
    perspective: 600px; 
 
    border: 1px solid transparent; 
 
} 
 
.box-container .box .front, .box-container .box .back { 
 
    float: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform-style: preserve-3d; 
 
    backface-visibility: hidden; 
 
    transition: all 1s ease-in-out; 
 
    color: white; 
 
    font-size: 60px; 
 
} 
 
.box-container .box .front { 
 
    background: blue; 
 
    transform: rotateX(0) rotateY(0); 
 
    z-index: 900; 
 
} 
 
.box-container .box .back { 
 
    background: red; 
 
    z-index: 800; 
 
} 
 
.box-container .box:hover .front { 
 
    z-index: 900; 
 
} 
 
.box-container .box:hover .back { 
 
    z-index: 1000; 
 
    transform: rotateX(180) rotateY(0); 
 
} 
 

 
.box-container .box.hover-in-top .front, 
 
.box-container .box.hover-out-bottom .back { 
 
    transform: rotateX(-179deg) rotateY(0); 
 
} 
 
.box-container .box.hover-in-top .back, 
 
.box-container .box.hover-out-bottom .front { 
 
    animation: Xminus 1s ease-in-out; 
 
} 
 
@keyframes Xminus { 
 
    from {transform: rotateX(179deg) rotateY(0);} 
 
    to {transform: rotateX( 0deg) rotateY(0);} 
 
} 
 

 
.box-container .box.hover-in-bottom .front, 
 
.box-container .box.hover-out-top .back { 
 
    transform: rotateX(179deg); 
 
} 
 
.box-container .box.hover-in-bottom .back, 
 
.box-container .box.hover-out-top .front { 
 
    animation: Xplus 1s ease-in-out; 
 
} 
 
@keyframes Xplus { 
 
    from {transform: rotateX(-179deg) rotateY(0);} 
 
    to {transform: rotateX( 0deg) rotateY(0);} 
 
} 
 

 
.box-container .box.hover-in-right .front, 
 
.box-container .box.hover-out-left .back { 
 
    transform: rotateY(-179deg); 
 
} 
 
.box-container .box.hover-in-right .back, 
 
.box-container .box.hover-out-left .front { 
 
    animation: Yminus 1s ease-in-out; 
 
} 
 
@keyframes Yminus { 
 
    from {transform: rotateX(0deg) rotateY(179deg);} 
 
    to {transform: rotateX(0deg) rotateY( 0deg);} 
 
} 
 

 
.box-container .box.hover-in-left .front, 
 
.box-container .box.hover-out-right .back { 
 
    transform: rotateY(179deg); 
 
} 
 

 
.box-container .box.hover-in-left .back, 
 
.box-container .box.hover-out-right .front { 
 
    animation: Yplus 1s ease-in-out; 
 
} 
 
@keyframes Yplus { 
 
    from {transform: rotateX(0deg) rotateY(-179deg);} 
 
    to {transform: rotateX(0deg) rotateY( 0deg);} 
 
} 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box-container"> 
 
    <div class="box"> 
 
     <div class="front">FRONT</div> 
 
     <div class="back">BACK</div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="front">FRONT</div> 
 
     <div class="back">BACK</div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="front">FRONT</div> 
 
     <div class="back">BACK</div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="front">FRONT</div> 
 
     <div class="back">BACK</div> 
 
    </div> 
 
</div>

Vấn đề với hình ảnh động nếu rằng nếu bạn rời khỏi div trước hình ảnh động đã kết thúc, các hình ảnh động sẽ phá vỡ

Nhưng nếu di chuyển chậm, và ở trên div cho đến khi hoạt ảnh kết thúc, điều này sẽ hoạt động tốt.

Tôi hy vọng rằng ai đó tìm thấy giải pháp tốt hơn