add 'fade-in-then-half-out' fragment style, 'current-visible' was renamed to 'fade-in-then-out'

This commit is contained in:
Hakim El Hattab 2018-06-11 10:59:31 +02:00
parent 4672801229
commit 4bea8e17e8
4 changed files with 38 additions and 3 deletions

View File

@ -761,7 +761,8 @@ The default fragment style is to start out invisible and fade in. This style can
<p class="fragment shrink">shrink</p> <p class="fragment shrink">shrink</p>
<p class="fragment fade-out">fade-out</p> <p class="fragment fade-out">fade-out</p>
<p class="fragment fade-up">fade-up (also down, left and right!)</p> <p class="fragment fade-up">fade-up (also down, left and right!)</p>
<p class="fragment current-visible">visible only once</p> <p class="fragment fade-in-then-out">fades in, then out when we move to the next step</p>
<p class="fragment fade-in-then-half-out">fades in, then 50% out when we move to the next step</p>
<p class="fragment highlight-current-blue">blue only once</p> <p class="fragment highlight-current-blue">blue only once</p>
<p class="fragment highlight-red">highlight-red</p> <p class="fragment highlight-red">highlight-red</p>
<p class="fragment highlight-green">highlight-green</p> <p class="fragment highlight-green">highlight-green</p>

View File

@ -127,13 +127,25 @@ body {
-webkit-transform: translate(0, 0); -webkit-transform: translate(0, 0);
transform: translate(0, 0); } transform: translate(0, 0); }
.reveal .slides section .fragment.fade-in-then-out,
.reveal .slides section .fragment.current-visible { .reveal .slides section .fragment.current-visible {
opacity: 0; opacity: 0;
visibility: hidden; } visibility: hidden; }
.reveal .slides section .fragment.fade-in-then-out.current-fragment,
.reveal .slides section .fragment.current-visible.current-fragment { .reveal .slides section .fragment.current-visible.current-fragment {
opacity: 1; opacity: 1;
visibility: inherit; } visibility: inherit; }
.reveal .slides section .fragment.fade-in-then-half-out {
opacity: 0;
visibility: hidden; }
.reveal .slides section .fragment.fade-in-then-half-out.visible {
opacity: 0.5;
visibility: inherit; }
.reveal .slides section .fragment.fade-in-then-half-out.current-fragment {
opacity: 1;
visibility: inherit; }
.reveal .slides section .fragment.highlight-red, .reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red, .reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green, .reveal .slides section .fragment.highlight-green,

View File

@ -160,6 +160,7 @@ body {
} }
} }
.reveal .slides section .fragment.fade-in-then-out,
.reveal .slides section .fragment.current-visible { .reveal .slides section .fragment.current-visible {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
@ -170,6 +171,21 @@ body {
} }
} }
.reveal .slides section .fragment.fade-in-then-half-out {
opacity: 0;
visibility: hidden;
&.visible {
opacity: 0.5;
visibility: inherit;
}
&.current-fragment {
opacity: 1;
visibility: inherit;
}
}
.reveal .slides section .fragment.highlight-red, .reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red, .reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green, .reveal .slides section .fragment.highlight-green,

View File

@ -139,8 +139,14 @@
<p class="fragment grow">grow</p> <p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p> <p class="fragment shrink">shrink</p>
<p class="fragment fade-out">fade-out</p> <p class="fragment fade-out">fade-out</p>
<p class="fragment fade-up">fade-up (also down, left and right!)</p> <p>
<p class="fragment current-visible">current-visible</p> <span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
<span style="display: inline-block;" class="fragment fade-up">up, </span>
<span style="display: inline-block;" class="fragment fade-down">down, </span>
<span style="display: inline-block;" class="fragment fade-left">left</span>
</p>
<p class="fragment fade-in-then-out">fade-in-then-out</p>
<p class="fragment fade-in-then-half-out">fade-in-then-half-out</p>
<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p> <p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>
</section> </section>
</section> </section>