jquery loại bỏ lớp học sau khi css hoạt hình chơi?

Tôi có đoạn code css:jquery loại bỏ lớp học sau khi css hoạt hình chơi?

body.start{-webkit-animation:srcb ease-in .4s 1;}

và chỉ chơi một lần khi bước vào trang web

nhưng vấn đề là trong khi các hình ảnh động thực hiện

các nút trong trang web của tôi không làm việc

làm cách nào tôi có thể xóa lớp cơ thể "bắt đầu" sau khi hoạt ảnh được thực hiện

hoặc xóa lớp trễ x giây aft er hoạt hình chơi?

Nguồn

2012-12-14 jk jk

Bạn có thể liên kết với transitionend sự kiện (cho tất cả trong số họ, trên thực tế):

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", 
    function() { 
     $(this).removeClass("start"); 
    } 
);

Nếu bạn muốn thực hiện một sự chậm trễ, bạn có thể queue() hoạt động loại bỏ lớp:

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", 
    function() { 
     $(this).delay(1000).queue(function() { // Wait for 1 second. 
      $(this).removeClass("start").dequeue(); 
     }); 
    } 
);

Lưu ý:on() chỉ tồn tại kể từ jQuery 1.7, nếu bạn đang sử dụng bản phát hành cũ hơn, bạn sẽ phải sử dụng bind() thay vào đó để mã ở trên hoạt động.

Nguồn

2012-12-14 18:52:56

+1 wow Tôi không biết rằng –

@jkjk, bạn có thể giải thích cách thức này không hoạt động không? Trình xử lý có chạy trên trình duyệt của bạn không? Bạn đã đặt mã trong trình xử lý 'ready' hoặc trong phần tử'

Một cách khác có lẽ?

$(window).load(function(){ 
    setTimeout(function(){ 
     $('body.start').removeClass('start') 
    }, 4000); 
});

Nguồn

2012-12-14 18:52:41

cảm ơn, nó hoạt động –

Công trình này, nhưng về lý thuyết nó dễ vỡ hơn nhiều. Nếu bạn cần xóa lớp ngay lập tức sau (ví dụ: nếu bạn đang tạo hoạt ảnh khi nhấp), điều này không tốt bằng cách nghe sự kiện hoạt ảnhEnd. – Pirijan

Đây là mã:

var div = document.querySelector('div'); 

function callback() { 
    div.classList.remove('start'); // or modify div.className 
} 

div.addEventListener("webkitAnimationEnd", callback, false);

Kiểm tra live example này trên jsbin.

Xin lưu ý rằng hoạt ảnh của bạn và giải pháp của tôi chỉ hoạt động trong các trình duyệt dựa trên webkit. Trong môi trường sản xuất, bạn nên xem xét các trình duyệt khác và bắt buộc cung cấp giải pháp không có tiền tố.

Nguồn

2012-12-14 18:58:56 dreame4

Hãy thử

webkitAnimationEnd oanimationend msAnimationEnd animationend

thay vì

transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd

này đã làm việc cho tôi.

Nguồn

2013-03-29 11:24:32 zeno2k

Câu trả lời này giống như một bình luận cho câu trả lời được chấp nhận. Vui lòng giải thích cách sử dụng các thuộc tính này để câu trả lời có thể tự đứng vững. –

$("#mydiv").removeClass("start", 
    function() { 
     alert("do something"); 
    });

Nguồn

2017-07-20 21:02:36

Các vấn đề liên quan

jquery loại bỏ lớp học sau khi css hoạt hình chơi?

Trả lời

Các vấn đề liên quan