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.
This commit is contained in:
		
							
								
								
									
										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;
 | 
			
		||||
  }
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user