Tạo lại trang động?

Question

Tôi đang chuyển nội dung của các div (làm mờ các nội dung cũ ra, sau đó làm mờ các nội dung mới) và vì chúng có nội dung hơi khác nhau, thời điểm chúng thay đổi có một sự tổ chức lại mọi thứ bên dưới chúng.

Câu hỏi của tôi là, có cách nào giúp chuyển động này mượt mà không?

Tôi nghi ngờ rằng cách duy nhất khả thi để thực hiện việc này là sử dụng javascript để xác định trước thời điểm nào (trong trường hợp của tôi, tôi chỉ xử lý các khối nơi thay đổi căn chỉnh dọc) của phần tử bắt đầu và kết thúc và chỉ định các giá trị này trực tiếp. Một khi tôi làm điều này, tôi chắc chắn rằng quá trình chuyển đổi CSS3 sẽ áp dụng một hình ảnh động dễ chịu.

Có cách nào để nhận điều này mà không chỉ định kích thước rõ ràng không? Tôi dường như nhớ lại tại một số điểm có kinh nghiệm các mặt hàng được di chuyển xung quanh trang trong một thời trang hoạt hình. Điều này cho tôi hy vọng rằng nó có thể được thực hiện chỉ bằng cách sử dụng CSS.

Answer 1

Tôi thường tạo phần tử tạm thời (ẩn) chứa nội dung mới để tính chiều cao của nó. Sau đó, phần tử gốc có thể được làm động từ chiều cao hiện tại của nó đến chiều cao mới được tính toán. Điều quan trọng là yếu tố tạm thời được tạo ra là anh chị em giống hệt nhau của nguyên tố gốc để tất cả các kiểu cần thiết xếp chồng và được kế thừa một cách chính xác (ví dụ, tính chiều cao nội dung mới là vô dụng nếu nó không chính xác font-size áp dụng)

Trong khi hiệu ứng động giữa độ cao khác nhau thiết lập một cách rõ ràng (ví dụ với JS như đã mô tả ở trên) có thể được thực hiện với CSS3 (transition: height .5s ease;), nó sẽ không làm việc cho chiều cao khác nhau thiết lập mặc nhiên (tức là sửa đổi nội dung phần tử với height:auto)