From 95bba5179fa422ec8bd3934a67929053b41ac5d8 Mon Sep 17 00:00:00 2001
From: Johannes Ammon
Date: Sun, 18 Jan 2015 10:55:05 +0100
Subject: 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.
---
css/reveal.scss | 159 +++++++++++++++++++++++++++-----------------------------
1 file changed, 78 insertions(+), 81 deletions(-)
(limited to 'css')
diff --git a/css/reveal.scss b/css/reveal.scss
index 6cc21ba..ed74153 100644
--- a/css/reveal.scss
+++ b/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;
}
--
cgit v1.2.3
From 420b6912d7ef004f3ced3cb89d95abf7a9ed1274 Mon Sep 17 00:00:00 2001
From: Johannes Ammon
Date: Sun, 18 Jan 2015 18:12:36 +0100
Subject: Adding one-sided transitions
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(+)
(limited to 'css')
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
+
+
+
+
+ (Passengers entering and leaving)
+
+
+```
+
+
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;
}
--
cgit v1.2.3