xobs
/
fa20-bt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
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 fade-out">fade-out</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-red">highlight-red</p>
<p class="fragment highlight-green">highlight-green</p>

12
css/reveal.css
View File

@ -127,13 +127,25 @@ body {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
.reveal .slides section .fragment.fade-in-then-out,
.reveal .slides section .fragment.current-visible {
opacity: 0;
visibility: hidden; }
.reveal .slides section .fragment.fade-in-then-out.current-fragment,
.reveal .slides section .fragment.current-visible.current-fragment {
opacity: 1;
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-current-red,
.reveal .slides section .fragment.highlight-green,

16
css/reveal.scss
View File

@ -160,6 +160,7 @@ body {
}
}
.reveal .slides section .fragment.fade-in-then-out,
.reveal .slides section .fragment.current-visible {
opacity: 0;
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-current-red,
.reveal .slides section .fragment.highlight-green,

10
demo.html
View File

@ -139,8 +139,14 @@
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</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 current-visible">current-visible</p>
<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>
</section>
</section>