Adding one-sided transitions
Now the transition isn’t any more „per slide“ but „per movement of a slide“. So the slide can disappear in another way than it appeared.edit
parent
95bba5179f
commit
420b6912d7
21
README.md
21
README.md
|
@ -474,6 +474,27 @@ The global presentation transition is set using the ```transition``` config valu
|
|||
</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.
|
||||
|
||||
|
||||
|
|
|
@ -458,12 +458,14 @@ body {
|
|||
}
|
||||
@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;
|
||||
}
|
||||
|
@ -471,12 +473,14 @@ body {
|
|||
|
||||
@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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue