xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding one-sided transitions

Browse Source 
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.
This commit is contained in:
Johannes Ammon 2015-01-18 18:12:36 +01:00
parent 95bba5179f
commit 420b6912d7
2 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@ -474,6 +474,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.

4
css/reveal.scss
View File

@ -458,12 +458,14 @@ body {
} }
@mixin transition-horizontal-past($style) { @mixin transition-horizontal-past($style) {
.reveal .slides>section[data-transition=#{$style}].past, .reveal .slides>section[data-transition=#{$style}].past,
.reveal .slides>section[data-transition~=#{$style}-out].past,
.reveal.#{$style} .slides>section:not([data-transition]).past { .reveal.#{$style} .slides>section:not([data-transition]).past {
@content; @content;
} }
} }
@mixin transition-horizontal-future($style) { @mixin transition-horizontal-future($style) {
.reveal .slides>section[data-transition=#{$style}].future, .reveal .slides>section[data-transition=#{$style}].future,
.reveal .slides>section[data-transition~=#{$style}-in].future,
.reveal.#{$style} .slides>section:not([data-transition]).future { .reveal.#{$style} .slides>section:not([data-transition]).future {
@content; @content;
} }
@ -471,12 +473,14 @@ body {
@mixin transition-vertical-past($style) { @mixin transition-vertical-past($style) {
.reveal .slides>section>section[data-transition=#{$style}].past, .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 { .reveal.#{$style} .slides>section>section:not([data-transition]).past {
@content; @content;
} }
} }
@mixin transition-vertical-future($style) { @mixin transition-vertical-future($style) {
.reveal .slides>section>section[data-transition=#{$style}].future, .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 { .reveal.#{$style} .slides>section>section:not([data-transition]).future {
@content; @content;
} }