Prechádzať zdrojové kódy

Added some styles using the current-fragment class

according to README, I don't include reveal.min.js.
Hence I believe it makes sense to not include reveal.min.css either.
Hence, examples added in index.html can give the feeling that they don't work yet.
Guillaume Turri 11 rokov pred
rodič
commit
b46fd8dd70
3 zmenil súbory, kde vykonal 26 pridanie a 1 odobranie
  1. 2 0
      README.md
  2. 22 1
      css/reveal.css
  3. 2 0
      index.html

+ 2 - 0
README.md

@@ -440,6 +440,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 roll-in">roll-in</p>
 	<p class="fragment fade-out">fade-out</p>
+	<p class="fragment current-visible">visible 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-green">highlight-green</p>
 	<p class="fragment highlight-blue">highlight-blue</p>

+ 22 - 1
css/reveal.css

@@ -179,9 +179,20 @@ body {
 		opacity: 0.5;
 	}
 
+.reveal .slides section .fragment.current-visible {
+	opacity:0;
+}
+
+.reveal .slides section .fragment.current-visible.current-fragment {
+	opacity:1;
+}
+
 .reveal .slides section .fragment.highlight-red,
+.reveal .slides section .fragment.highlight-current-red,
 .reveal .slides section .fragment.highlight-green,
-.reveal .slides section .fragment.highlight-blue {
+.reveal .slides section .fragment.highlight-current-green,
+.reveal .slides section .fragment.highlight-blue,
+.reveal .slides section .fragment.highlight-current-blue {
 	opacity: 1;
 }
 	.reveal .slides section .fragment.highlight-red.visible {
@@ -194,6 +205,16 @@ body {
 		color: #1b91ff;
 	}
 
+.reveal .slides section .fragment.highlight-current-red.current-fragment {
+	color: #ff2c2d
+}
+.reveal .slides section .fragment.highlight-current-green.current-fragment {
+	color: #17ff2e;
+}
+.reveal .slides section .fragment.highlight-current-blue.current-fragment {
+	color: #1b91ff;
+}
+
 
 /*********************************************
  * DEFAULT ELEMENT STYLES

+ 2 - 0
index.html

@@ -302,6 +302,8 @@ function linkify( selector ) {
 						<p class="fragment shrink">shrink</p>
 						<p class="fragment roll-in">roll-in</p>
 						<p class="fragment fade-out">fade-out</p>
+						<p class="fragment current-visible">visible 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-green">highlight-green</p>
 						<p class="fragment highlight-blue">highlight-blue</p>