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