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
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user