Merge branch 'master' of https://github.com/jammon/reveal.js into dev

This commit is contained in:
Hakim El Hattab 2015-05-03 19:16:27 -04:00
commit 0f7b0dc22c
2 changed files with 108 additions and 86 deletions

View File

@ -482,6 +482,27 @@ The global presentation transition is set using the ```transition``` config valu
</section> </section>
``` ```
You can as well override only the appearing or the disappearing of the slide:
```html
<section data-transition="slide">
The train goes on …
</section>
<section data-transition="slide">
and on …
</section>
<section data-transition="slide-in fade-out">
and stops.
</section>
<section data-transition="fade-in slide-out">
(Passengers entering and leaving)
</section>
<section data-transition="slide">
And it starts again.
</section>
```
Note that this does not work with the page and cube transitions. Note that this does not work with the page and cube transitions.
@ -967,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. 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.

View File

@ -427,94 +427,103 @@ 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 .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;
}
}
@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;
}
}
/********************************************* /*********************************************
* 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}) {
.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); transform: translate(-150%, 0);
} }
.reveal .slides>section[data-transition=slide].future, @include transition-horizontal-future(#{$stylename}) {
.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); transform: translate(150%, 0);
} }
@include transition-vertical-past(#{$stylename}) {
.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%); transform: translate(0, -150%);
} }
.reveal .slides>section>section[data-transition=slide].future, @include transition-vertical-future(#{$stylename}) {
.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%); 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,
.reveal.convex .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=default].future, @include transition-horizontal-future(#{$stylename}) {
.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); transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
} }
@include transition-vertical-past(#{$stylename}) {
.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); transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
} }
.reveal .slides>section>section[data-transition=default].future, @include transition-vertical-future(#{$stylename}) {
.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); 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);
} }
@ -523,28 +532,21 @@ 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,
.reveal.zoom .slides>section:not([data-transition]).past {
visibility: hidden; visibility: hidden;
transform: scale(16); 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,
.reveal.zoom .slides>section>section:not([data-transition]).past {
transform: translate(0, -150%); 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%);
} }
@ -713,8 +715,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;
} }