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.
This commit is contained in:
Johannes Ammon
parent
9a89e39367
commit
95bba5179f
2 changed files with 83 additions and 86 deletions
|
|
@ -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<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.
|
||||
|
||||
|
|
|
|||
167
css/reveal.scss
167
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue