Làm cách nào để phát hiện kết thúc quá trình chuyển đổi CSS trên phần tử 'cụ thể' trong khi nhiều quá trình chuyển đổi đang diễn ra?

Question

tôi đã được sử dụng sau đây để phát hiện sự kết thúc của một quá trình chuyển đổi CSS3, như vậy: -

CACHE.previewControlWrap.css({ 
       'bottom':'-217px' 
      }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() { 
       CACHE.songWrap.css({ 
        'bottom': '0' 
       }); 
    }); 

này hoạt động hoàn hảo, một sự chuyển tiếp CSS diễn ra, sau đó khi nó hoàn thành, một diễn ra.

Tuy nhiên khi tôi lồng hàm ẩn danh này xuống mức thứ ba, chức năng này không hoạt động. Sự kiện 'kết thúc' chuyển tiếp thứ ba được kích hoạt cùng lúc với sự kiện thứ hai, thay vì xâu chuỗi chúng lại cái khác (như sẽ xảy ra với jQuery .animate())

Điều tôi muốn làm là gắn 'transitionend 'sự kiện đối với yếu tố ' cụ thể '' cụ thể. Hiện tại có vẻ như nó đang tìm kiếm một sự kiện chuyển tiếp trên bất kỳ phần tử và đám cháy nào phù hợp. Nếu không, có cách giải quyết khác để tôi có thể có ba sự kiện chuyển tiếp css liên tiếp xếp hàng lên tất cả các lần bắn sau khi lần trước đó hoàn thành.

Xin cảm ơn trước.

Dưới đây là đoạn code đó gây ra vấn đề: -

if(Modernizr.csstransitions){ 

     CACHE.leftcolbottom.css({ 
      'left':'-230px' 
     }); 
     CACHE.songwrap.css({ 
      'left':'100%', 
      'right': '-100%' 
     }); 
     CACHE.previewControlWrap.css({ 
      'bottom':'-217px' 
     }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() { 
      CACHE.songWrap.css({ 
       'bottom': '0' 
      }); 
      CACHE.middle.css({ 
       'bottom': '350px' 
      }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() { 
       CACHE.slidewrap.css({ 
        'left': '50%', 
        'right': '0%' 
       }); 
       CACHE.leftcoltop.css({ 
        'left': '0%' 
       });  
      });   
     }); 

    } 

Answer 1

Được rồi, tôi đã thực sự tìm thấy câu trả lời bản thân mình, hy vọng điều này sẽ giúp người khác với cùng một vấn đề.

Giải pháp là sử dụng phương thức jQuery .on() tiêu chuẩn hơn là phương thức 'một lần' .one(). Sau đó kiểm tra mục tiêu để xem liệu nó có phải là phần tử mà bạn đã ràng buộc sự kiện, sau đó loại bỏ trình xử lý sự kiện trong cùng một hàm ẩn danh.

Các làm cho lồng nhìn đang chuyển 'ba' như thế này trong trường hợp của tôi: -

}).on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function (e) { 
       if($(e.target).is(this)){ 
        CACHE.slidewrap.css({ 
         'left': '50%', 
         'right': '0%' 
        }); 
        CACHE.leftcoltop.css({ 
         'left': '0%' 
        }); 
        $(this).off('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd'); 
       } 
      });  

Nếu bất cứ ai khác có một giải pháp thanh lịch hơn, xin vui lòng cho tôi biết và tôi sẽ trao giải câu trả lời cho bạn như thích hợp.