Trigering quá trình chuyển đổi CSS3 bằng cách thêm một lớp với Jquery

Question

Hiện tại tôi có một fiddle đang chạy mà tôi đang cố gắng chuyển đổi độ mờ đục css3 để kích hoạt khi tôi thêm lớp vào đó. Các thiết lập cơ bản là tôi bấm vào một nút và sau đó thông qua jquery tôi thêm một div để dom và sau khi tôi thêm yếu tố đó để dom tôi sau đó thêm một lớp học với nó. Lớp thêm vào phần tử dom mới đó là giả sử để khởi động quá trình chuyển đổi của tôi nhưng nó không phải là, điều duy nhất đang xảy ra là phần tử đang được hiển thị nhưng chuyển đổi độ mờ không hoạt động. Bất kỳ trợ giúp nào cũng sẽ được đánh giá cao, tôi để lại một liên kết đến fiddle ở đây fiddle link .Và có, tôi biết tôi có thể làm mờ dần với chỉ jquery, nhưng đây chỉ là một thử nghiệm, có lẽ sẽ được sử dụng để khởi động css khác chuyển đổi khác rồi opacity

Answer 1

Tôi không nghĩ rằng chuyển tiếp CSS3 được hỗ trợ trên các phần tử được tạo động. Tôi đã thử sửa đổi mẫu của bạn bằng cách đặt trực tiếp số div trong HTML và quá trình chuyển đổi hoạt động tốt. Bạn có thể phải sống với điều đó như một giải pháp thay thế cho đến khi hỗ trợ trình duyệt được cải thiện.

Answer 2

Tôi đã gặp sự cố này trước đây, giải pháp thay thế duy nhất mà tôi tìm thấy là thêm một setTimeout để cho thông báo DOM có phần tử mới. Nó có thể là zero ms và nó vẫn sẽ làm việc:

$('button').live('click', function() { 
    $(this).after("<div class='fade'>This is just a test</div>") 
    setTimeout(function(){$(".fade").addClass("in");}, 0) 
}); 

http://jsfiddle.net/tfmFx/