xobs/fa20-bt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Mixins for readability of transitions added

Browse Source 
To honor the DRY principle repeating patterns have been factored out.
In addition there was an anchor missing in README.md.
This commit is contained in:
Johannes Ammon 2015-01-18 10:55:05 +01:00
parent 9a89e39367
commit 95bba5179f
2 changed files with 83 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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. 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. 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.

167
css/reveal.scss
View File

@ -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 * SLIDE TRANSITION
* Aliased 'linear' for backwards compatibility * 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 * CONVEX TRANSITION
* Aliased 'default' for backwards compatibility * 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 * 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); 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); 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); 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); transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
} }
@ -542,29 +547,22 @@ body {
* ZOOM TRANSITION * 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%);
} }
@ -732,8 +730,7 @@ body {
* NO TRANSITION * NO TRANSITION
*********************************************/ *********************************************/
.reveal .slides section[data-transition=none], @include transition-global(none) {
.reveal.none .slides section:not([data-transition]) {
transform: none; transform: none;
transition: none; transition: none;
} }