add test presentation for per-slide transitions, compile css #1106

README.md

@@ -482,7 +482,7 @@ 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:
+You can also use different in and out transitions for the same slide:
 
 ```html
 <section data-transition="slide">
@@ -988,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<a id="installation"></a>
+## Installation
 
 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.css

@@ -334,30 +334,57 @@ body {
 .reveal .slides > section.past, .reveal .slides > section.future, .reveal .slides > section > section.past, .reveal .slides > section > section.future {
   opacity: 0; }
 
+/*********************************************
+ * Mixins for readability of transitions
+ *********************************************/
 /*********************************************
  * SLIDE TRANSITION
  * Aliased 'linear' for backwards compatibility
  *********************************************/
-.reveal.slide section, .reveal.linear section {
+.reveal.slide section {
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden; }
 
-.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 {
+.reveal .slides > section[data-transition=slide].past, .reveal .slides > section[data-transition~=slide-out].past, .reveal.slide .slides > section:not([data-transition]).past {
   -webkit-transform: translate(-150%, 0);
       -ms-transform: translate(-150%, 0);
           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 {
+.reveal .slides > section[data-transition=slide].future, .reveal .slides > section[data-transition~=slide-in].future, .reveal.slide .slides > section:not([data-transition]).future {
   -webkit-transform: translate(150%, 0);
       -ms-transform: translate(150%, 0);
           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 {
+.reveal .slides > section > section[data-transition=slide].past, .reveal .slides > section > section[data-transition~=slide-out].past, .reveal.slide .slides > section > section:not([data-transition]).past {
   -webkit-transform: translate(0, -150%);
       -ms-transform: translate(0, -150%);
           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 {
+.reveal .slides > section > section[data-transition=slide].future, .reveal .slides > section > section[data-transition~=slide-in].future, .reveal.slide .slides > section > section:not([data-transition]).future {
+  -webkit-transform: translate(0, 150%);
+      -ms-transform: translate(0, 150%);
+          transform: translate(0, 150%); }
+
+.reveal.linear section {
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden; }
+
+.reveal .slides > section[data-transition=linear].past, .reveal .slides > section[data-transition~=linear-out].past, .reveal.linear .slides > section:not([data-transition]).past {
+  -webkit-transform: translate(-150%, 0);
+      -ms-transform: translate(-150%, 0);
+          transform: translate(-150%, 0); }
+
+.reveal .slides > section[data-transition=linear].future, .reveal .slides > section[data-transition~=linear-in].future, .reveal.linear .slides > section:not([data-transition]).future {
+  -webkit-transform: translate(150%, 0);
+      -ms-transform: translate(150%, 0);
+          transform: translate(150%, 0); }
+
+.reveal .slides > section > section[data-transition=linear].past, .reveal .slides > section > section[data-transition~=linear-out].past, .reveal.linear .slides > section > section:not([data-transition]).past {
+  -webkit-transform: translate(0, -150%);
+      -ms-transform: translate(0, -150%);
+          transform: translate(0, -150%); }
+
+.reveal .slides > section > section[data-transition=linear].future, .reveal .slides > section > section[data-transition~=linear-in].future, .reveal.linear .slides > section > section:not([data-transition]).future {
   -webkit-transform: translate(0, 150%);
       -ms-transform: translate(0, 150%);
           transform: translate(0, 150%); }
@@ -366,38 +393,54 @@ body {
  * 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 {
+.reveal .slides > section[data-transition=default].past, .reveal .slides > section[data-transition~=default-out].past, .reveal.default .slides > section:not([data-transition]).past {
   -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
           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 {
+.reveal .slides > section[data-transition=default].future, .reveal .slides > section[data-transition~=default-in].future, .reveal.default .slides > section:not([data-transition]).future {
   -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
           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 {
+.reveal .slides > section > section[data-transition=default].past, .reveal .slides > section > section[data-transition~=default-out].past, .reveal.default .slides > section > section:not([data-transition]).past {
   -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
           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 {
+.reveal .slides > section > section[data-transition=default].future, .reveal .slides > section > section[data-transition~=default-in].future, .reveal.default .slides > section > section:not([data-transition]).future {
+  -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+          transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }
+
+.reveal .slides > section[data-transition=convex].past, .reveal .slides > section[data-transition~=convex-out].past, .reveal.convex .slides > section:not([data-transition]).past {
+  -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+          transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }
+
+.reveal .slides > section[data-transition=convex].future, .reveal .slides > section[data-transition~=convex-in].future, .reveal.convex .slides > section:not([data-transition]).future {
+  -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+          transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }
+
+.reveal .slides > section > section[data-transition=convex].past, .reveal .slides > section > section[data-transition~=convex-out].past, .reveal.convex .slides > section > section:not([data-transition]).past {
+  -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
+          transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); }
+
+.reveal .slides > section > section[data-transition=convex].future, .reveal .slides > section > section[data-transition~=convex-in].future, .reveal.convex .slides > section > section:not([data-transition]).future {
   -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
           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 {
+.reveal .slides > section[data-transition=concave].past, .reveal .slides > section[data-transition~=concave-out].past, .reveal.concave .slides > section:not([data-transition]).past {
   -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
           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 {
+.reveal .slides > section[data-transition=concave].future, .reveal .slides > section[data-transition~=concave-in].future, .reveal.concave .slides > section:not([data-transition]).future {
   -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
           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 {
+.reveal .slides > section > section[data-transition=concave].past, .reveal .slides > section > section[data-transition~=concave-out].past, .reveal.concave .slides > section > section:not([data-transition]).past {
   -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
           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 {
+.reveal .slides > section > section[data-transition=concave].future, .reveal .slides > section > section[data-transition~=concave-in].future, .reveal.concave .slides > section > section:not([data-transition]).future {
   -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
           transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); }
 
@@ -408,24 +451,24 @@ body {
   -webkit-transition-timing-function: ease;
           transition-timing-function: ease; }
 
-.reveal .slides > section[data-transition=zoom].past, .reveal.zoom .slides > section:not([data-transition]).past {
+.reveal .slides > section[data-transition=zoom].past, .reveal .slides > section[data-transition~=zoom-out].past, .reveal.zoom .slides > section:not([data-transition]).past {
   visibility: hidden;
   -webkit-transform: scale(16);
       -ms-transform: scale(16);
           transform: scale(16); }
 
-.reveal .slides > section[data-transition=zoom].future, .reveal.zoom .slides > section:not([data-transition]).future {
+.reveal .slides > section[data-transition=zoom].future, .reveal .slides > section[data-transition~=zoom-in].future, .reveal.zoom .slides > section:not([data-transition]).future {
   visibility: hidden;
   -webkit-transform: scale(0.2);
       -ms-transform: scale(0.2);
           transform: scale(0.2); }
 
-.reveal .slides > section > section[data-transition=zoom].past, .reveal.zoom .slides > section > section:not([data-transition]).past {
+.reveal .slides > section > section[data-transition=zoom].past, .reveal .slides > section > section[data-transition~=zoom-out].past, .reveal.zoom .slides > section > section:not([data-transition]).past {
   -webkit-transform: translate(0, -150%);
       -ms-transform: translate(0, -150%);
           transform: translate(0, -150%); }
 
-.reveal .slides > section > section[data-transition=zoom].future, .reveal.zoom .slides > section > section:not([data-transition]).future {
+.reveal .slides > section > section[data-transition=zoom].future, .reveal .slides > section > section[data-transition~=zoom-in].future, .reveal.zoom .slides > section > section:not([data-transition]).future {
   -webkit-transform: translate(0, 150%);
       -ms-transform: translate(0, 150%);
           transform: translate(0, 150%); }
@@ -601,7 +644,7 @@ body {
 /*********************************************
  * NO TRANSITION
  *********************************************/
-.reveal .slides section[data-transition=none], .reveal.none .slides section:not([data-transition]) {
+.reveal .slides > section[data-transition=none], .reveal.none .slides > section:not([data-transition]) {
   -webkit-transform: none;
       -ms-transform: none;
           transform: none;

css/reveal.scss

@@ -432,39 +432,39 @@ body {
  *********************************************/
 
 @mixin transition-global($style) {
-  .reveal .slides>section[data-transition=#{$style}],
+	.reveal .slides>section[data-transition=#{$style}],
-  .reveal.#{$style} .slides>section:not([data-transition]) {
+	.reveal.#{$style} .slides>section:not([data-transition]) {
-    @content;
+		@content;
-  }
+	}
 }
 @mixin transition-horizontal-past($style) {
-  .reveal .slides>section[data-transition=#{$style}].past,
+	.reveal .slides>section[data-transition=#{$style}].past,
-  .reveal .slides>section[data-transition~=#{$style}-out].past,
+	.reveal .slides>section[data-transition~=#{$style}-out].past,
-  .reveal.#{$style} .slides>section:not([data-transition]).past {
+	.reveal.#{$style} .slides>section:not([data-transition]).past {
-    @content;
+		@content;
-  }
+	}
 }
 @mixin transition-horizontal-future($style) {
-  .reveal .slides>section[data-transition=#{$style}].future,
+	.reveal .slides>section[data-transition=#{$style}].future,
-  .reveal .slides>section[data-transition~=#{$style}-in].future,
+	.reveal .slides>section[data-transition~=#{$style}-in].future,
-  .reveal.#{$style} .slides>section:not([data-transition]).future {
+	.reveal.#{$style} .slides>section:not([data-transition]).future {
-    @content;
+		@content;
-  }
+	}
 }
 
 @mixin transition-vertical-past($style) {
-  .reveal .slides>section>section[data-transition=#{$style}].past,
+	.reveal .slides>section>section[data-transition=#{$style}].past,
-  .reveal .slides>section>section[data-transition~=#{$style}-out].past,
+	.reveal .slides>section>section[data-transition~=#{$style}-out].past,
-  .reveal.#{$style} .slides>section>section:not([data-transition]).past {
+	.reveal.#{$style} .slides>section>section:not([data-transition]).past {
-    @content;
+		@content;
-  }
+	}
 }
 @mixin transition-vertical-future($style) {
-  .reveal .slides>section>section[data-transition=#{$style}].future,
+	.reveal .slides>section>section[data-transition=#{$style}].future,
-  .reveal .slides>section>section[data-transition~=#{$style}-in].future,
+	.reveal .slides>section>section[data-transition~=#{$style}-in].future,
-  .reveal.#{$style} .slides>section>section:not([data-transition]).future {
+	.reveal.#{$style} .slides>section>section:not([data-transition]).future {
-    @content;
+		@content;
-  }
+	}
 }
 
 /*********************************************
@@ -533,21 +533,21 @@ body {
  *********************************************/
 
 @include transition-global(zoom) {
-  transition-timing-function: ease;
+	transition-timing-function: ease;
 }
 @include transition-horizontal-past(zoom) {
-  visibility: hidden;
+	visibility: hidden;
-  transform: scale(16);
+	transform: scale(16);
 }
 @include transition-horizontal-future(zoom) {
-  visibility: hidden;
+	visibility: hidden;
-  transform: scale(0.2);
+	transform: scale(0.2);
 }
 @include transition-vertical-past(zoom) {
-  transform: translate(0, -150%);
+	transform: translate(0, -150%);
 }
 @include transition-vertical-future(zoom) {
-  transform: translate(0, 150%);
+	transform: translate(0, 150%);
 }
 
 

test/examples/slide-transitions.html

@@ -0,0 +1,101 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Slide Transitions</title>
+
+		<link rel="stylesheet" href="../../css/reveal.css">
+		<link rel="stylesheet" href="../../css/theme/white.css" id="theme">
+		<style type="text/css" media="screen">
+			.slides section.has-dark-background,
+			.slides section.has-dark-background h3 {
+				color: #fff;
+			}
+			.slides section.has-light-background,
+			.slides section.has-light-background h3 {
+				color: #222;
+			}
+		</style>
+	</head>
+
+	<body>
+
+		<div class="reveal">
+
+			<div class="slides">
+
+				<section>
+					<h3>Default</h3>
+				</section>
+
+				<section>
+					<h3>Default</h3>
+				</section>
+
+				<section data-transition="zoom">
+					<h3>data-transition: zoom</h3>
+				</section>
+
+				<section data-transition="zoom-in fade-out">
+					<h3>data-transition: zoom-in fade-out</h3>
+				</section>
+
+				<section>
+					<h3>Default</h3>
+				</section>
+
+				<section data-transition="convex">
+					<h3>data-transition: convex</h3>
+				</section>
+
+				<section data-transition="convex-in concave-out">
+					<h3>data-transition: convex-in concave-out</h3>
+				</section>
+
+				<section>
+					<section data-transition="zoom">
+						<h3>Default</h3>
+					</section>
+					<section data-transition="concave">
+						<h3>data-transition: concave</h3>
+					</section>
+					<section data-transition="convex-in fade-out">
+						<h3>data-transition: convex-in fade-out</h3>
+					</section>
+					<section>
+						<h3>Default</h3>
+					</section>
+				</section>
+
+				<section data-transition="none">
+					<h3>data-transition: none</h3>
+				</section>
+
+				<section>
+					<h3>Default</h3>
+				</section>
+
+			</div>
+
+		</div>
+
+		<script src="../../lib/js/head.min.js"></script>
+		<script src="../../js/reveal.js"></script>
+
+		<script>
+
+			Reveal.initialize({
+				center: true,
+				history: true,
+
+				// transition: 'slide',
+				// transitionSpeed: 'slow',
+				// backgroundTransition: 'slide'
+			});
+
+		</script>
+
+	</body>
+</html>