Chuyển đổi giữa phần đóng mở chi tiết thành phần

Question

Có thể tạo hiệu ứng chuyển tiếp giữa trạng thái mở/đóng của phần tử <details> chỉ với CSS không?

Answer 1

Không, hiện tại không. Có, nhưng chỉ khi bạn biết height hoặc có thể tạo hiệu ứng động font-size.

Ban đầu, đây không phải là trường hợp. Từ http://html5doctor.com/the-details-and-summary-elements/, "... nếu bạn có thể sử dụng chuyển tiếp CSS để tạo hiệu ứng mở và đóng, nhưng chúng tôi vẫn chưa thể." (Có một bình luận tại bác sĩ HTML5 gần kết thúc, nhưng có vẻ như yêu cầu JS ép buộc hoạt ảnh CSS.)

Có thể sử dụng các kiểu khác nhau dựa trên việc mở hay đóng. "lấy" bình thường. Tuy nhiên, hôm nay, quá trình chuyển đổi hoạt động nếu bạn biết số height hoặc có thể tạo hiệu ứng động font-size. Xem http://codepen.io/morewry/pen/gbJvy để biết ví dụ và biết thêm chi tiết.

Đây là giải pháp 2013 mà loại hàng giả nó:

CSS (Có thể cần phải thêm tiền tố)

/* http://daneden.me/animate/ */ 
@keyframes fadeInDown { 
    0% { 
     opacity: 0; 
     transform: translateY(-1.25em); 
    } 
    100% { 
     opacity: 1; 
     transform: translateY(0); 
    } 
} 
.details-animated[open] { 
    animation-name: fadeInDown; 
    animation-duration: 0.5s; 
} 

HTML

<details class="details-animated"> 
    <summary>CSS Animation - Summary</summary> 
    Try using [Dan Eden's fadeInDown][1] to maybe fake it a little. Yay, some animation. 
</details> 

này hoạt động ngày hôm nay:

CSS (Có thể cần phải thêm tiền tố)

.details-animated { 
    transition: height 1s ease; 
} 
.details-animated:not([open]) { height: 1.25em; } 
.details-animated[open] { height: 3.75em; } 

PS: Chỉ thử nghiệm trong Chrome. Nghe FF vẫn không hỗ trợ details nói chung. IE và Edge vẫn không hỗ trợ details.

(Bạn có thể sử dụng hoạt ảnh hoặc chuyển tiếp khung hình chính để thực hiện tất cả các loại hoạt ảnh khác để mở. Tôi đã chọn fadeInDown chỉ nhằm mục đích minh họa. Đây là lựa chọn hợp lý sẽ mang lại cảm giác tương tự nếu bạn không thể thêm đánh dấu hoặc sẽ không biết chiều cao của nội dung. Tùy chọn của bạn, tuy nhiên, không giới hạn ở đây: xem các nhận xét về câu trả lời này bao gồm hai lựa chọn thay thế, bao gồm cách tiếp cận font-size.)

Answer 2

Với chiều cao phải chụp một số điểm tôi thích để bắt đầu làm sống động chiều cao và sau đó chụp. Nếu bạn đủ may mắn để có tất cả các yếu tố một chiều cao tương tự, giải pháp này có thể khá hiệu quả. (Bạn cần một div bên trong các yếu tố chi tiết của bạn mặc dù)

@keyframes slideDown { 
    0% { 
     opacity: 0; 
     height: 0; 
    } 
    100% { 
     opacity: 1; 
     height: 20px; /* height of your smallest content, e.g. one line */ 
    } 
} 
details { 
    max-width:400px; 
} 
details[open]>div { 
    animation-name: slideDown; 
    animation-duration: 200ms; 
    animation-timing-function:ease-in; 
    overflow:hidden; 
} 

thấy http://dabblet.com/gist/5866920 ví dụ

Answer 3

trả lời ngắn gọn của tôi là: bạn không thể chuyển giữa tóm tắt và phần còn lại của nội dung chi tiết.

NHƯNG!

Bạn có thể làm một số chuyển thoải mái bên trong bản tóm tắt giữa selector chi tiết và chi tiết [mở]

details{ 
 
    position: relative; 
 
    width: 100px;height: 100px; 
 
    perspective: 1000px; 
 
} 
 
div{ 
 
    position: absolute; 
 
    top: 20px; 
 
    width: 100px;height: 100px; 
 
    background: black; 
 
} 
 
details .transition{ 
 
    transition: 1s linear; 
 
    transform-origin: right top; 
 
    ; 
 
} 
 
details[open] .transition{ 
 
    transform: rotateY(180deg); 
 
    background: orangered; 
 
}

<details> 
 
    <summary> 
 
    <div></div> 
 
    <div class="transition"></div> 
 
    </summary> 
 
</details>

NB: Tôi trả lời này bởi vì nó là người đầu tiên kết quả từ googling về điều này!

Answer 4

Tất nhiên nó có thể:

<style type="text/css">  
    DETAILS[open] SUMMARY ~ * { 
     animation: sweep .5s ease-in-out; 
    } 
    @keyframes sweep { 
     0% {opacity: 0; margin-left: -10px} 
     100% {opacity: 1; margin-left: 0px} 
    } 
</style>