From 95bba5179fa422ec8bd3934a67929053b41ac5d8 Mon Sep 17 00:00:00 2001 From: Johannes Ammon Date: Sun, 18 Jan 2015 10:55:05 +0100 Subject: [PATCH 1/2] 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. --- README.md | 2 +- css/reveal.scss | 167 ++++++++++++++++++++++++------------------------ 2 files changed, 83 insertions(+), 86 deletions(-) diff --git a/README.md b/README.md index e748ca8..12ddea8 100644 --- a/README.md +++ b/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 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. diff --git a/css/reveal.scss b/css/reveal.scss index 6cc21ba..ed74153 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -446,94 +446,99 @@ 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.#{$style} .slides>section:not([data-transition]).past { + @content; + } +} +@mixin transition-horizontal-future($style) { + .reveal .slides>section[data-transition=#{$style}].future, + .reveal.#{$style} .slides>section:not([data-transition]).future { + @content; + } +} + +@mixin transition-vertical-past($style) { + .reveal .slides>section>section[data-transition=#{$style}].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.#{$style} .slides>section>section:not([data-transition]).future { + @content; + } +} + /********************************************* * SLIDE TRANSITION * Aliased 'linear' for backwards compatibility *********************************************/ -.reveal.slide section, -.reveal.linear section { - backface-visibility: hidden; +@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%); + } } -.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, -.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); +@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); + } } -.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, -.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; } From 420b6912d7ef004f3ced3cb89d95abf7a9ed1274 Mon Sep 17 00:00:00 2001 From: Johannes Ammon Date: Sun, 18 Jan 2015 18:12:36 +0100 Subject: [PATCH 2/2] Adding one-sided transitions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Now the transition isn’t any more „per slide“ but „per movement of a slide“. So the slide can disappear in another way than it appeared. --- README.md | 21 +++++++++++++++++++++ css/reveal.scss | 4 ++++ 2 files changed, 25 insertions(+) diff --git a/README.md b/README.md index 12ddea8..53c85c8 100644 --- a/README.md +++ b/README.md @@ -474,6 +474,27 @@ The global presentation transition is set using the ```transition``` config valu ``` +You can as well override only the appearing or the disappearing of the slide: + +```html +
+ The train goes on … +
+
+ and on … +
+
+ and stops. +
+
+ (Passengers entering and leaving) +
+
+ And it starts again. +
+``` + + Note that this does not work with the page and cube transitions. diff --git a/css/reveal.scss b/css/reveal.scss index ed74153..17e0407 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -458,12 +458,14 @@ body { } @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; } @@ -471,12 +473,14 @@ body { @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; }