"Force Reflow" trong quá trình chuyển đổi CSS trong Bootstrap

Question

Sửa lại plugin jquery bootstrap-mode từ trình khởi động của Twitter Tôi thấy rằng chúng sử dụng các hiệu ứng chuyển tiếp CSS cho hiệu ứng mờ dần.

Một điều mà rất tò mò tôi từ mã là dòng này:

that.$element[0].offsetWidth // force reflow 

Nếu dòng đó là nhận xét quá trình chuyển đổi không hoạt động. Tất cả các tài liệu tham khảo tôi đã tìm thấy về ý nghĩa của nó là "lực lượng reflow" bình luận.

Cách đọc thuộc tính đó có thể ảnh hưởng đến quá trình chuyển đổi CSS? Đây có phải là địa chỉ lỗi trong trình duyệt không?

Answer 1

Bit trả lời trễ, nhưng tôi đang giải quyết một số vấn đề với quá trình chuyển đổi CSS mà tôi nghĩ có liên quan đến mã bit bạn đã tìm thấy này và hy vọng giúp bạn hiểu rõ hơn!

Về cơ bản, tôi chuyển đổi một lớp từ Javascript/jQuery để thêm chuyển tiếp css vào phần tử dom. CSS của phần tử này sau đó được cập nhật khiến cho quá trình chuyển đổi xảy ra. Một phiên bản đơn giản của mã này là dưới đây:

var myelement = $("myselector"); 

// Set z-indexes before the transition 
myelement.css("z-index", 1); 

var reflow = root.offset().left; // Re-flow the page 

// Set the transition class on the element which will animate 
myelement.addClass("trans"); 
myelement.css("width", 0 + "px"); // Animate to nothing 

Vì vậy, nếu tôi bỏ ghi chú dòng tái dòng chảy của tôi, CHUYỂN TIẾP CỦA TÔI sẽ xảy ra, nhưng đôi khi (có vẻ như thường xuyên hơn trong safari) z-index của myElement sẽ không đã được cập nhật.

Với tôi, có vẻ như trong các tình huống nhất định, các kiểu được viết cho mái vòm đang được đệm ở đâu đó và không bị xóa.

Đó là nơi thực hiện cuộc gọi đến phần bù đắp bên trái. Đây là một trong các thuộc tính được cho là gây ra một dòng chảy trong trang. Điều này rõ ràng thường là một điều xấu hiệu suất khôn ngoan, nhưng nó có vẻ cần thiết để ngăn chặn các quá trình chuyển đổi css chọn lên các giá trị sai.

Có một thú vị Mozilla bug lodged mà thảo luận về cùng một chủ đề. Có thể được một số quan tâm. Họ đề nghị bổ sung một API để bắt đầu chuyển tiếp từ mã.

Đây cũng là một số interesting SO post về việc buộc tái phát.

Hy vọng điều này sẽ hữu ích! :)