Browse Source

Mixins for readability of transitions added

To honor the DRY principle repeating patterns have been factored out.
In addition there was an anchor missing in README.md.
Johannes Ammon 10 years ago
parent
commit
95bba5179f
2 changed files with 79 additions and 82 deletions
  1. 1 1
      README.md
  2. 78 81
      css/reveal.scss

+ 1 - 1
README.md

@@ -951,7 +951,7 @@ Reveal.initialize({
 Read MathJax's documentation if you need [HTTPS delivery](http://docs.mathjax.org/en/latest/start.html#secure-access-to-the-cdn) or serving of [specific versions](http://docs.mathjax.org/en/latest/configuration.html#loading-mathjax-from-the-cdn) for stability.
 
 
-## Installation
+## Installation<a id="installation"></a>
 
 The **basic setup** is for authoring presentations only. The **full setup** gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source.
 

+ 78 - 81
css/reveal.scss

@@ -447,93 +447,98 @@ body {
 
 
 /*********************************************
- * SLIDE TRANSITION
- * Aliased 'linear' for backwards compatibility
+ * Mixins for readability of transitions
  *********************************************/
 
-.reveal.slide section,
-.reveal.linear section {
-	backface-visibility: hidden;
+@mixin transition-global($style) {
+  .reveal .slides>section[data-transition=#{$style}],
+  .reveal.#{$style} .slides>section:not([data-transition]) {
+    @content;
+  }
 }
-
-.reveal .slides>section[data-transition=slide].past,
-.reveal.slide .slides>section:not([data-transition]).past,
-.reveal .slides>section[data-transition=linear].past,
-.reveal.linear .slides>section:not([data-transition]).past {
-	transform: translate(-150%, 0);
+@mixin transition-horizontal-past($style) {
+  .reveal .slides>section[data-transition=#{$style}].past,
+  .reveal.#{$style} .slides>section:not([data-transition]).past {
+    @content;
+  }
 }
-.reveal .slides>section[data-transition=slide].future,
-.reveal.slide .slides>section:not([data-transition]).future,
-.reveal .slides>section[data-transition=linear].future,
-.reveal.linear .slides>section:not([data-transition]).future {
-	transform: translate(150%, 0);
+@mixin transition-horizontal-future($style) {
+  .reveal .slides>section[data-transition=#{$style}].future,
+  .reveal.#{$style} .slides>section:not([data-transition]).future {
+    @content;
+  }
 }
 
-.reveal .slides>section>section[data-transition=slide].past,
-.reveal.slide .slides>section>section:not([data-transition]).past,
-.reveal .slides>section>section[data-transition=linear].past,
-.reveal.linear .slides>section>section:not([data-transition]).past {
-	transform: translate(0, -150%);
+@mixin transition-vertical-past($style) {
+  .reveal .slides>section>section[data-transition=#{$style}].past,
+  .reveal.#{$style} .slides>section>section:not([data-transition]).past {
+    @content;
+  }
 }
-.reveal .slides>section>section[data-transition=slide].future,
-.reveal.slide .slides>section>section:not([data-transition]).future,
-.reveal .slides>section>section[data-transition=linear].future,
-.reveal.linear .slides>section>section:not([data-transition]).future {
-	transform: translate(0, 150%);
+@mixin transition-vertical-future($style) {
+  .reveal .slides>section>section[data-transition=#{$style}].future,
+  .reveal.#{$style} .slides>section>section:not([data-transition]).future {
+    @content;
+  }
 }
 
+/*********************************************
+ * SLIDE TRANSITION
+ * Aliased 'linear' for backwards compatibility
+ *********************************************/
+
+@each $stylename in slide, linear {
+	.reveal.#{$stylename} section {
+		backface-visibility: hidden;
+	}
+	@include transition-horizontal-past(#{$stylename}) {
+		transform: translate(-150%, 0);
+	}
+	@include transition-horizontal-future(#{$stylename}) {
+		transform: translate(150%, 0);
+	}
+	@include transition-vertical-past(#{$stylename}) {
+		transform: translate(0, -150%);
+	}
+	@include transition-vertical-future(#{$stylename}) {
+		transform: translate(0, 150%);
+	}
+}
 
 /*********************************************
  * CONVEX TRANSITION
  * Aliased 'default' for backwards compatibility
  *********************************************/
 
-.reveal .slides>section[data-transition=default].past,
-.reveal.default .slides>section:not([data-transition]).past,
-.reveal .slides>section[data-transition=convex].past,
-.reveal.convex .slides>section:not([data-transition]).past {
-	transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-}
-.reveal .slides>section[data-transition=default].future,
-.reveal.default .slides>section:not([data-transition]).future,
-.reveal .slides>section[data-transition=convex].future,
-.reveal.convex .slides>section:not([data-transition]).future {
-	transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-}
-
-.reveal .slides>section>section[data-transition=default].past,
-.reveal.default .slides>section>section:not([data-transition]).past,
-.reveal .slides>section>section[data-transition=convex].past,
-.reveal.convex .slides>section>section:not([data-transition]).past {
-	transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
-}
-.reveal .slides>section>section[data-transition=default].future,
-.reveal.default .slides>section>section:not([data-transition]).future,
-.reveal .slides>section>section[data-transition=convex].future,
-.reveal.convex .slides>section>section:not([data-transition]).future {
-	transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+@each $stylename in default, convex {
+	@include transition-horizontal-past(#{$stylename}) {
+		transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+	}
+	@include transition-horizontal-future(#{$stylename}) {
+		transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+	}
+	@include transition-vertical-past(#{$stylename}) {
+		transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
+	}
+	@include transition-vertical-future(#{$stylename}) {
+		transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+	}
 }
 
-
 /*********************************************
  * CONCAVE TRANSITION
  *********************************************/
 
-.reveal .slides>section[data-transition=concave].past,
-.reveal.concave .slides>section:not([data-transition]).past {
+@include transition-horizontal-past(concave) {
 	transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 }
-.reveal .slides>section[data-transition=concave].future,
-.reveal.concave .slides>section:not([data-transition]).future {
+@include transition-horizontal-future(concave) {
 	transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 }
-
-.reveal .slides>section>section[data-transition=concave].past,
-.reveal.concave .slides>section>section:not([data-transition]).past {
+@include transition-vertical-past(concave) {
 	transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 }
-.reveal .slides>section>section[data-transition=concave].future,
-.reveal.concave .slides>section>section:not([data-transition]).future {
+@include transition-vertical-future(concave) {
 	transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 }
 
@@ -542,29 +547,22 @@ body {
  * ZOOM TRANSITION
  *********************************************/
 
-.reveal .slides>section[data-transition=zoom],
-.reveal.zoom .slides>section:not([data-transition]) {
-	transition-timing-function: ease;
+@include transition-global(zoom) {
+  transition-timing-function: ease;
 }
-
-.reveal .slides>section[data-transition=zoom].past,
-.reveal.zoom .slides>section:not([data-transition]).past {
-	visibility: hidden;
-	transform: scale(16);
+@include transition-horizontal-past(zoom) {
+  visibility: hidden;
+  transform: scale(16);
 }
-.reveal .slides>section[data-transition=zoom].future,
-.reveal.zoom .slides>section:not([data-transition]).future {
-	visibility: hidden;
-	transform: scale(0.2);
+@include transition-horizontal-future(zoom) {
+  visibility: hidden;
+  transform: scale(0.2);
 }
-
-.reveal .slides>section>section[data-transition=zoom].past,
-.reveal.zoom .slides>section>section:not([data-transition]).past {
-	transform: translate(0, -150%);
+@include transition-vertical-past(zoom) {
+  transform: translate(0, -150%);
 }
-.reveal .slides>section>section[data-transition=zoom].future,
-.reveal.zoom .slides>section>section:not([data-transition]).future {
-	transform: translate(0, 150%);
+@include transition-vertical-future(zoom) {
+  transform: translate(0, 150%);
 }
 
 
@@ -732,8 +730,7 @@ body {
  * NO TRANSITION
  *********************************************/
 
-.reveal .slides section[data-transition=none],
-.reveal.none .slides section:not([data-transition]) {
+@include transition-global(none) {
 	transform: none;
 	transition: none;
 }