Làm thế nào để loại bỏ sự chậm trễ trên Css3 Trượt ra chuyển tiếp trong đó sử dụng chuyển tiếp tối đa chiều cao

Question

Tôi đang gặp vấn đề với quá trình chuyển đổi mà tôi đang sử dụng để trượt bảng điều khiển vào và ra.

Hãy dành một cái nhìn tại các jsbin Thông báo http://jsbin.com/uvejuj/1/

sau đó khi tôi nhấp vào nút Toggle lần đầu tiên chuyển đổi xảy ra ngay lập tức.

Tuy nhiên, nếu tôi nhấp lại vào nút này thì quá trình chuyển đổi sẽ làm chậm thời gian chuyển đổi trước khi thực thi.

Điều gì gây ra sự chậm trễ khi đóng cửa và làm cách nào tôi có thể loại bỏ nó?

Cảm ơn

Answer 1

Đó là vì bạn đang hoạt ảnh ở độ cao tối đa từ 0 đến 1000px nhưng nội dung của bạn chỉ cao khoảng 120px. Độ trễ là hoạt ảnh diễn ra trên 880 pixel mà bạn không thể nhìn thấy.

Hoặc đặt chiều cao tối đa thành chiều cao đã biết của nội dung (nếu bạn biết - ví dụ: http://jsbin.com/onihik/1/) hoặc thử phương pháp khác. Có lẽ cái gì đó như giải pháp trì hoãn https://stackoverflow.com/a/6486082/2619379

Answer 2

Fixed JS Bin

Fix:

Đặt khối-Bút chì (0, 1, 0, 1) chức năng chuyển tiếp cho các phần tử.

.text { 
    overflow: hidden; 
    max-height: 0; 
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); 
    &.full { 
    max-height: 1000px; 
    transition: max-height 1s ease-in-out; 
}