ngắn và ngọt ngào phiên bản:chuyển CSS trộn tuyệt đối và tương đối vị
Có thể kết hợp position: relative và position: absolute với mịn CSS-chuyển tiếp?
phiên bản Verbose:
tôi là tạo ra một widget nhỏ (tôi gọi nó là một deck), mà tôi wan't để có thể có một nhà nước sụp đổ và mở rộng. Tất cả tốt cho đến nay, điều này là làm việc tốt.
Chuyển đổi giữa hai trạng thái, tự nhiên đảm bảo hoạt ảnh chuyển tiếp. Điều này cũng đang hoạt động, nhưng không phải cách tôi muốn nó được thực hiện. Những gì tôi muốn làm, là sử dụng CSS-chuyển đổi, thay vì sử dụng định vị tuyệt đối bằng cách sử dụng JavaScript, như tôi bây giờ.
Than ôi, tình huống hiện tại, ở trạng thái mở rộng, các thẻ trong boong luôn được đặt hoàn toàn, vị trí của chúng được tính toán khi chúng được thêm vào boong. Khi sụp đổ, bốn số đầu tiên được xếp chồng lên nhau theo cách xếp tầng và phần còn lại nằm trên thẻ thứ tư. Trực quan bắt chước một chồng.
Vấn đề với cách tiếp cận này là tôi không thể dựa vào lưu lượng bố cục bình thường để định vị các thẻ, mà hút vì nhiều lý do. Nếu tôi sử dụng position: relative cho các thẻ ở trạng thái mở rộng, chúng sẽ chuyển đổi độc đáo từng cái một. Nhưng quá trình chuyển đổi sang trạng thái thu gọn không hoạt động - chỉ cần chụp từ vị trí này sang vị trí khác trong giây lát. Đây là ofcourse hợp lý kể từ khi không có vị trí tuyệt đối ở nơi đầu tiên, trình duyệt rõ ràng không biết từ nơi để chuyển đổi từ.
Những gì tôi có cho đến nay là này (Fiddle):
CSS (chỉ quy định có liên quan):
div.deck-container {
position: relative;
}
div.deck-container li {
display: inline-block;
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
div.deck-container.collapsed li {
position: absolute;
left: 9px;
top: 6px;
}
div.deck-container.collapsed li:first-child {
left: 0;
top: 0px;
}
div.deck-container.collapsed li:nth-child(2) {
left: 3px;
top: 2px;
}
div.deck-container.collapsed li:nth-child(3) {
left: 6px;
top: 4px;
}
HTML (đánh dấu liên quan chỉ):
<div class="deck-container">
<ul>
<li>Card 1</li>
<li>Card 2</li>
<li>Card 3</li>
<li>Card 4</li>
<li>Card 5</li>
</ul>
</div>
Trong hoàn hảo của tôi trên thế giới, thêm lớp collapsed vào div.deck-container sẽ tạo hiệu ứng cho các thẻ thành các vị trí bị thu hẹp và ngược lại, nhưng có vẻ như điều này là không thể. Xin vui lòng ai đó nói với tôi tôi là sai.
tôi sợ điều này.Tôi biết rằng có thể bằng cách sử dụng định vị tuyệt đối trong trạng thái mở rộng để tạo hiệu ứng động giữa các trạng thái. Nhưng đó là trường hợp tôi cũng chỉ là tốt hơn-thậm chí tốt hơn-với giải pháp JavaScript hiện tại của tôi hỗ trợ vì số lượng thẻ trong một boong không phải là hữu hạn. –
Ah, trong trường hợp đó bạn chắc chắn cần JS ... Dù sao, như một giải pháp hỗn hợp, bạn có thể đặt các vị trí trên cùng và trái bằng cách sử dụng JS, có thể dễ dàng và sau đó tạo hiệu ứng cho chúng bằng cách sử dụng các hiệu ứng chuyển tiếp. – scumah
Chỉ chuyển tiếp các chức năng di chuột? Tôi có thể di chuyển thử nghiệm div # khi tôi di chuột trên div # hoverdiv không? – ShibinRagh