CSS3 - Chuyển đổi trên loại bỏ DOM

Question

Sử dụng keyframes, có thể tạo hiệu ứng một phần tử ngay sau khi được chèn vào DOM. Dưới đây là một số mẫu CSS:

@-moz-keyframes fadeIn { 
    from {opacity:0;} 
    to {opacity:1;} 
} 

@-webkit-keyframes fadeIn { 
    from {opacity:0;} 
    to {opacity:1;} 
} 

@keyframes fadeIn { 
    from {opacity:0;} 
    to {opacity:1;} 
} 

#box { 
    -webkit-animation: fadeIn 500ms; 
    -moz-animation: fadeIn 500ms; 
    animation: fadeIn 500ms; 
} 

Có một số chức năng tương tự có sẵn để áp dụng hoạt ảnh (qua CSS, không JavaScript) cho phần tử ngay trước khi bị xóa khỏi DOM không? Dưới đây là một jsFiddle tôi đã thực hiện để chơi xung quanh với ý tưởng này; cảm thấy tự do để ngã ba nó nếu bạn biết một giải pháp.

jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/

Answer 1

Tạo một hình ảnh động CSS gọi fadeOut, nói. Sau đó, khi bạn muốn loại bỏ yếu tố, thay đổi animation tài sản trên các yếu tố để mà hoạt hình mới, và sử dụng các sự kiện animationend để kích hoạt việc loại bỏ thực tế của nguyên tố này khi hoạt hình được thực hiện:

$('.hide').click(function() { 
    if (!$(this).hasClass('disabled')) { 
     $('#fill').css('-webkit-animation', 'fadeOut 500ms'); 
     $('#fill').bind('webkitAnimationEnd',function(){ 
      $('#fill').remove(); 
      $('.show, .hide').toggleClass('disabled'); 
     }); 
    } 
}); 

See also my updated version of your jsFiddle. đó làm việc đối với tôi trong Safari, ít nhất.

Vâng, bạn nên sử dụng lớp học thay vì .css().

Tôi không nghĩ jQuery có bất kỳ hỗ trợ "thực" nào cho hoạt ảnh CSS, vì vậy tôi không nghĩ rằng bạn có thể loại bỏ điều đó webkitAnimationEnd. Trong Firefox, nó chỉ được gọi là animationend.

Tôi chắc chắn không có cách nào để thực hiện việc này chỉ trong CSS.

Answer 2

Tôi đã làm việc trên thư viện thành phần cho javascript và tôi tự mình gặp sự cố này. Tôi có lợi ích của việc có thể ném một tấn javascript vào vấn đề này, nhưng vì bạn đã sử dụng một chút, hãy cân nhắc những điều sau đây cho một giải pháp giảm độ duyên dáng:

Khi loại bỏ bất kỳ nút thành phần/dom nào, hãy thêm một lớp được gọi là 'xóa'.

Sau đó, trong css bạn có thể xác định hình ảnh động bằng cách sử dụng lớp rằng:

.someElement.removing { 
    -webkit-animation: fadeOut 500ms; 
    -moz-animation: fadeOut 500ms; 
    animation: fadeOut 500ms; 
} 

Và trở lại trong javascript, chỉ sau khi bạn thêm 'loại bỏ' lớp, bạn sẽ có thể kiểm tra các 'hoạt hình 'css tài sản, và nếu nó tồn tại, sau đó bạn biết rằng bạn có thể móc vào' animationEnd 'và nếu nó không, sau đó chỉ cần loại bỏ các yếu tố ngay lập tức. Tôi nhớ thử nghiệm này một lúc trở lại, nó sẽ làm việc; Tôi sẽ xem liệu tôi có thể đào mã ví dụ không.

Cập nhật: Tôi đã đào kỹ thuật này và bắt đầu viết một plugin thực sự thú vị cho jQuery cho phép bạn sử dụng hoạt ảnh CSS3 cho các phần tử DOM đang bị xóa. Không yêu cầu Javascript bổ sung: http://www.github.com/arthur5005/jquery.motionnotion

Rất thử nghiệm, sử dụng rủi ro của riêng bạn, nhưng sẽ yêu một số trợ giúp và phản hồi. :)

Answer 3

lý tưởng cho một cái gì đó giống như fadeIn và fadeOut bạn nên sử dụng hiệu ứng chuyển tiếp css hình ảnh động không css ..