Ẩn reveal.js mảnh vỡ sau khi họ xuất hiện

Question

Nói rằng tôi có một reveal.js đơn giản trượt như thế này:

<section> 
    <h2 class="fragment" data-fragment-index="1">first</h2> 
    <h2 class="fragment" data-fragment-index="2">second</h2> 
    <h2 class="fragment" data-fragment-index="1">first</h2> 
</section> 

Tôi muốn hai "đầu tiên" sẽ được hiển thị chỉ trong đoạn 1 và sau đó quay trở lại ẩn trong đoạn 2, khi "giây" xuất hiện. Tôi nên làm như thế nào?

Answer 1

Lớp current-visible là những gì bạn đang tìm kiếm, xem doc trên mảnh: https://github.com/hakimel/reveal.js/#fragments

Đối với một cuộc biểu tình của lớp này, vui lòng xem reveal.js chung giới thiệu: http://lab.hakim.se/reveal-js/#/20/1

Answer 2

Nếu bạn muốn loại bỏ hoàn toàn không gian được phần tử ẩn chụp sau khi nó được hiển thị, bạn có thể sử dụng công cụ chọn và thuộc tính CSS sau:

.fragment.current-visible.visible:not(.current-fragment) { 
    display: none; 
    height:0px; 
    line-height: 0px; 
    font-size: 0px; 
} 

Ngoài ra nếu bạn không muốn hành vi này cho hiện tại-v các đoạn dễ đọc, bạn chỉ có thể thêm lớp tùy chỉnh vào bộ chọn và các phần tử HTML của mình.

Answer 3

Chỉ cần mở rộng câu trả lời của dodo. Nếu bạn muốn xóa hoàn toàn phần tử, nhưng cũng muốn có một chút hoạt ảnh, bạn có thể làm điều gì đó như:

.fragment.current-visible.visible:not(.current-fragment) { 
    animation: removed-item-animation 1s cubic-bezier(0.6, -0.05, 0.9, 0.9) forwards; 
} 
@keyframes removed-item-animation { 
    0% { 
     opacity: 1; 
    } 

    100% { 
     opacity: 0; 
     line-height: 0px; 
     font-size: 0px; 
     height: 0px; 
     display: none; 
    } 
} 

Ở trên sẽ làm mờ phần tử. Bạn cũng có thể làm điều gì đó tuyệt vời như:

.fragment.current-visible.visible:not(.current-fragment) { 
    animation: removed-item-animation 1.5s cubic-bezier(0.6, -0.05, 0.9, 0.9) forwards; 
    transform-origin: 0% 100%; 
} 
@keyframes removed-item-animation { 
    0% { 
     opacity: 1; 
     transform: rotateZ(0); 
    } 

    100% { 
     opacity: 0; 
     transform: translateY(900px) rotateZ(70deg); 
     line-height: 0px; 
     display: none; 
    } 
} 

Điều này sẽ làm cho mục đó "rơi ra" của trang trình bày.