Merge branch 'master' of https://github.com/jammon/reveal.js into dev

README.md

@@ -482,6 +482,27 @@ The global presentation transition is set using the ```transition``` config valu
 </section>
 ```
 
+You can as well override only the appearing or the disappearing of the slide:
+
+```html
+<section data-transition="slide">
+    The train goes on … 
+</section>
+<section data-transition="slide"> 
+    and on … 
+</section>
+<section data-transition="slide-in fade-out"> 
+    and stops.
+</section>
+<section data-transition="fade-in slide-out"> 
+    (Passengers entering and leaving)
+</section>
+<section data-transition="slide">
+    And it starts again.
+</section>
+```
+
+
 Note that this does not work with the page and cube transitions.
 
 
@@ -967,7 +988,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.
 

css/reveal.scss

@@ -427,94 +427,103 @@ body {
 }
 
 
+/*********************************************
+ * Mixins for readability of transitions
+ *********************************************/
+
+@mixin transition-global($style) {
+  .reveal .slides>section[data-transition=#{$style}],
+  .reveal.#{$style} .slides>section:not([data-transition]) {
+    @content;
+  }
+}
+@mixin transition-horizontal-past($style) {
+  .reveal .slides>section[data-transition=#{$style}].past,
+  .reveal .slides>section[data-transition~=#{$style}-out].past,
+  .reveal.#{$style} .slides>section:not([data-transition]).past {
+    @content;
+  }
+}
+@mixin transition-horizontal-future($style) {
+  .reveal .slides>section[data-transition=#{$style}].future,
+  .reveal .slides>section[data-transition~=#{$style}-in].future,
+  .reveal.#{$style} .slides>section:not([data-transition]).future {
+    @content;
+  }
+}
+
+@mixin transition-vertical-past($style) {
+  .reveal .slides>section>section[data-transition=#{$style}].past,
+  .reveal .slides>section>section[data-transition~=#{$style}-out].past,
+  .reveal.#{$style} .slides>section>section:not([data-transition]).past {
+    @content;
+  }
+}
+@mixin transition-vertical-future($style) {
+  .reveal .slides>section>section[data-transition=#{$style}].future,
+  .reveal .slides>section>section[data-transition~=#{$style}-in].future,
+  .reveal.#{$style} .slides>section>section:not([data-transition]).future {
+    @content;
+  }
+}
+
 /*********************************************
  * SLIDE TRANSITION
  * Aliased 'linear' for backwards compatibility
  *********************************************/
 
-.reveal.slide section,
+@each $stylename in slide, linear {
-.reveal.linear section {
+	.reveal.#{$stylename} section {
-	backface-visibility: hidden;
+		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%);
+	}
 }
 
-.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);
-}
-.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);
-}
-
-.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%);
-}
-.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%);
-}
-
-
 /*********************************************
  * CONVEX TRANSITION
  * Aliased 'default' for backwards compatibility
  *********************************************/
 
-.reveal .slides>section[data-transition=default].past,
+@each $stylename in default, convex {
-.reveal.default .slides>section:not([data-transition]).past,
+	@include transition-horizontal-past(#{$stylename}) {
-.reveal .slides>section[data-transition=convex].past,
+		transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-.reveal.convex .slides>section:not([data-transition]).past {
+	}
-	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);
+	}
 }
-.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);
-}
-
 
 /*********************************************
  * CONCAVE TRANSITION
  *********************************************/
 
-.reveal .slides>section[data-transition=concave].past,
+@include transition-horizontal-past(concave) {
-.reveal.concave .slides>section:not([data-transition]).past {
 	transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 }
-.reveal .slides>section[data-transition=concave].future,
+@include transition-horizontal-future(concave) {
-.reveal.concave .slides>section:not([data-transition]).future {
 	transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 }
-
+@include transition-vertical-past(concave) {
-.reveal .slides>section>section[data-transition=concave].past,
-.reveal.concave .slides>section>section:not([data-transition]).past {
 	transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 }
-.reveal .slides>section>section[data-transition=concave].future,
+@include transition-vertical-future(concave) {
-.reveal.concave .slides>section>section:not([data-transition]).future {
 	transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 }
 
@@ -523,29 +532,22 @@ body {
  * ZOOM TRANSITION
  *********************************************/
 
-.reveal .slides>section[data-transition=zoom],
+@include transition-global(zoom) {
-.reveal.zoom .slides>section:not([data-transition]) {
+  transition-timing-function: ease;
-	transition-timing-function: ease;
 }
-
+@include transition-horizontal-past(zoom) {
-.reveal .slides>section[data-transition=zoom].past,
+  visibility: hidden;
-.reveal.zoom .slides>section:not([data-transition]).past {
+  transform: scale(16);
-	visibility: hidden;
-	transform: scale(16);
 }
-.reveal .slides>section[data-transition=zoom].future,
+@include transition-horizontal-future(zoom) {
-.reveal.zoom .slides>section:not([data-transition]).future {
+  visibility: hidden;
-	visibility: hidden;
+  transform: scale(0.2);
-	transform: scale(0.2);
 }
-
+@include transition-vertical-past(zoom) {
-.reveal .slides>section>section[data-transition=zoom].past,
+  transform: translate(0, -150%);
-.reveal.zoom .slides>section>section:not([data-transition]).past {
-	transform: translate(0, -150%);
 }
-.reveal .slides>section>section[data-transition=zoom].future,
+@include transition-vertical-future(zoom) {
-.reveal.zoom .slides>section>section:not([data-transition]).future {
+  transform: translate(0, 150%);
-	transform: translate(0, 150%);
 }
 
 
@@ -713,8 +715,7 @@ body {
  * NO TRANSITION
  *********************************************/
 
-.reveal .slides section[data-transition=none],
+@include transition-global(none) {
-.reveal.none .slides section:not([data-transition]) {
 	transform: none;
 	transition: none;
 }