webkitTransitionEnd sự kiện được kích hoạt khi quá trình chuyển đổi kết thúc vào div và chuyển tiếp kết thúc trên tất cả các div CHILD?

Question

All,

Tôi có một tình hình có vẻ gần như thế này:

My trang HTML một chứa div (mà tôi sẽ gọi "parentDiv") mà tôi đang thực hiện một quá trình chuyển đổi. Khi quá trình chuyển đổi kết thúc, nó nên gọi "onTransitionEndParent"

parentDiv chứa một div (mà tôi sẽ gọi "childDiv") mà tôi đang thực hiện một khác nhau chuyển đổi. Khi quá trình chuyển đổi đó kết thúc, nó sẽ gọi "onTransitionEndChild".

Vì vậy, mã của tôi trông gần như thế này:

parentDiv.addEventListener("webkitTransitionEnd", onTransitionEndParent, false); 
childDiv.addEventListener("webkitTransitionEnd", onTransitionEndChild, false); 

Vấn đề tôi đang tìm kiếm ...

onTransitionEndParent được gọi khi của parentDiv chuyển mục đích (đúng). Tuy nhiên, nó CŨNG gọi khi childDiv cùng kết thúc quá trình chuyển đổi (không phải những gì tôi mong đợi ...)

Nói cách khác ...

• onTransitionEndChild được gọi khi chuyển childDiv của kết thúc
• onTransitionEndParent được gọi khi chuyển parentDiv của kết thúc VÀ LẠI khi chuyển childDiv của kết thúc

là thứ này e hành vi chính xác, hoặc tôi đang làm điều gì đó sai?

Có cách nào để đảm bảo rằng onTransitionEndParent CHỈ được gọi khi quá trình chuyển đổi của ParentDiv kết thúc và KHÔNG khi nào quá trình chuyển đổi của div con đó kết thúc?

Rất cám ơn trước.

Answer 1

transitionEnd được gọi là sự kiện bubbling đang được gửi đi (bong bóng) từ trẻ sang cha mẹ.

lựa chọn cho bạn:

1. Hoặc phân tích event.target tài sản của đối tượng sự kiện - nó nên chứa phần tử với quá trình chuyển đổi kết thúc.
2. Hoặc để cài đặt trình xử lý sự kiện chuyển tiếpEnd ​​trên mỗi phần tử con và gọi event.stopPropagation() để tránh bị sủi bọt.

Answer 2

Tôi gặp phải sự cố tương tự sau lần cập nhật chrome cuối cùng. Hoạt ảnh trẻ em được kích hoạt hoạt ảnh cho phụ huynh. Điều này chỉ xảy ra trong Chrome dành cho máy tính để bàn chứ không phải trong FF hoặc Chrome dành cho thiết bị di động.

Đối với bất cứ ai quan tâm đến tôi giải quyết điều này bằng cách sử dụng:

 $(element).on("animationend webkitAnimationEnd", function(){ 
      //do something 
     }) 
     .children().on("animationend webkitAnimationEnd", function(){ 
      return false; //you can just use event.stopPropagation() 
     }); 

Answer 3

Để thêm vào @ c-nụ cười trả lời, kiểm tra event.propertyName giúp khi có nhiều hiệu ứng chuyển tiếp trên phần tử. Vì vậy, ví dụ -

button.addEventListener('transitionend', function(event) { 
    if (event.target.classList.contains('button') && event.propertyName === 'opacity') { 
    button.classList.add('hide'); 
    } 
}, false);