Skip to content
Snippets Groups Projects
Commit 80e52c08 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

add test presentation for per-slide transitions, compile css #1106

parent 0f7b0dc2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
README.md
+ 2
− 2
View file @ 80e52c08
......@@ -482,7 +482,7 @@ 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:
You can also use different in and out transitions for the same slide:
```html
<section data-transition="slide">
......@@ -988,7 +988,7 @@ Reveal.initialize({
Read MathJax's documentation if you need [HTTPS delivery](http://docs.mathjax.org/en/latest/start.html#secure-access-to-the-cdn) or serving of [specific versions](http://docs.mathjax.org/en/latest/configuration.html#loading-mathjax-from-the-cdn) for stability.
## Installation<a id="installation"></a>
## Installation
The **basic setup** is for authoring presentations only. The **full setup** gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source.
......
css/reveal.css
+ 61
− 18
View file @ 80e52c08
......@@ -334,30 +334,57 @@ body {
.reveal .slides > section.past, .reveal .slides > section.future, .reveal .slides > section > section.past, .reveal .slides > section > section.future {
opacity: 0; }
/*********************************************
* Mixins for readability of transitions
*********************************************/
/*********************************************
* SLIDE TRANSITION
* Aliased 'linear' for backwards compatibility
*********************************************/
.reveal.slide section, .reveal.linear section {
.reveal.slide section {
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.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 {
.reveal .slides > section[data-transition=slide].past, .reveal .slides > section[data-transition~=slide-out].past, .reveal.slide .slides > section:not([data-transition]).past {
-webkit-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
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 {
.reveal .slides > section[data-transition=slide].future, .reveal .slides > section[data-transition~=slide-in].future, .reveal.slide .slides > section:not([data-transition]).future {
-webkit-transform: translate(150%, 0);
-ms-transform: translate(150%, 0);
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 {
.reveal .slides > section > section[data-transition=slide].past, .reveal .slides > section > section[data-transition~=slide-out].past, .reveal.slide .slides > section > section:not([data-transition]).past {
-webkit-transform: translate(0, -150%);
-ms-transform: translate(0, -150%);
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 {
.reveal .slides > section > section[data-transition=slide].future, .reveal .slides > section > section[data-transition~=slide-in].future, .reveal.slide .slides > section > section:not([data-transition]).future {
-webkit-transform: translate(0, 150%);
-ms-transform: translate(0, 150%);
transform: translate(0, 150%); }
.reveal.linear section {
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.reveal .slides > section[data-transition=linear].past, .reveal .slides > section[data-transition~=linear-out].past, .reveal.linear .slides > section:not([data-transition]).past {
-webkit-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
transform: translate(-150%, 0); }
.reveal .slides > section[data-transition=linear].future, .reveal .slides > section[data-transition~=linear-in].future, .reveal.linear .slides > section:not([data-transition]).future {
-webkit-transform: translate(150%, 0);
-ms-transform: translate(150%, 0);
transform: translate(150%, 0); }
.reveal .slides > section > section[data-transition=linear].past, .reveal .slides > section > section[data-transition~=linear-out].past, .reveal.linear .slides > section > section:not([data-transition]).past {
-webkit-transform: translate(0, -150%);
-ms-transform: translate(0, -150%);
transform: translate(0, -150%); }
.reveal .slides > section > section[data-transition=linear].future, .reveal .slides > section > section[data-transition~=linear-in].future, .reveal.linear .slides > section > section:not([data-transition]).future {
-webkit-transform: translate(0, 150%);
-ms-transform: translate(0, 150%);
transform: translate(0, 150%); }
......@@ -366,38 +393,54 @@ body {
* 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 {
.reveal .slides > section[data-transition=default].past, .reveal .slides > section[data-transition~=default-out].past, .reveal.default .slides > section:not([data-transition]).past {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }
.reveal .slides > section[data-transition=default].future, .reveal .slides > section[data-transition~=default-in].future, .reveal.default .slides > section:not([data-transition]).future {
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }
.reveal .slides > section > section[data-transition=default].past, .reveal .slides > section > section[data-transition~=default-out].past, .reveal.default .slides > section > section:not([data-transition]).past {
-webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); }
.reveal .slides > section > section[data-transition=default].future, .reveal .slides > section > section[data-transition~=default-in].future, .reveal.default .slides > section > section:not([data-transition]).future {
-webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }
.reveal .slides > section[data-transition=convex].past, .reveal .slides > section[data-transition~=convex-out].past, .reveal.convex .slides > section:not([data-transition]).past {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 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 {
.reveal .slides > section[data-transition=convex].future, .reveal .slides > section[data-transition~=convex-in].future, .reveal.convex .slides > section:not([data-transition]).future {
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
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 {
.reveal .slides > section > section[data-transition=convex].past, .reveal .slides > section > section[data-transition~=convex-out].past, .reveal.convex .slides > section > section:not([data-transition]).past {
-webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
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 {
.reveal .slides > section > section[data-transition=convex].future, .reveal .slides > section > section[data-transition~=convex-in].future, .reveal.convex .slides > section > section:not([data-transition]).future {
-webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
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 {
.reveal .slides > section[data-transition=concave].past, .reveal .slides > section[data-transition~=concave-out].past, .reveal.concave .slides > section:not([data-transition]).past {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
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 {
.reveal .slides > section[data-transition=concave].future, .reveal .slides > section[data-transition~=concave-in].future, .reveal.concave .slides > section:not([data-transition]).future {
-webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
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 {
.reveal .slides > section > section[data-transition=concave].past, .reveal .slides > section > section[data-transition~=concave-out].past, .reveal.concave .slides > section > section:not([data-transition]).past {
-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
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 {
.reveal .slides > section > section[data-transition=concave].future, .reveal .slides > section > section[data-transition~=concave-in].future, .reveal.concave .slides > section > section:not([data-transition]).future {
-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); }
......@@ -408,24 +451,24 @@ body {
-webkit-transition-timing-function: ease;
transition-timing-function: ease; }
.reveal .slides > section[data-transition=zoom].past, .reveal.zoom .slides > section:not([data-transition]).past {
.reveal .slides > section[data-transition=zoom].past, .reveal .slides > section[data-transition~=zoom-out].past, .reveal.zoom .slides > section:not([data-transition]).past {
visibility: hidden;
-webkit-transform: scale(16);
-ms-transform: scale(16);
transform: scale(16); }
.reveal .slides > section[data-transition=zoom].future, .reveal.zoom .slides > section:not([data-transition]).future {
.reveal .slides > section[data-transition=zoom].future, .reveal .slides > section[data-transition~=zoom-in].future, .reveal.zoom .slides > section:not([data-transition]).future {
visibility: hidden;
-webkit-transform: scale(0.2);
-ms-transform: scale(0.2);
transform: scale(0.2); }
.reveal .slides > section > section[data-transition=zoom].past, .reveal.zoom .slides > section > section:not([data-transition]).past {
.reveal .slides > section > section[data-transition=zoom].past, .reveal .slides > section > section[data-transition~=zoom-out].past, .reveal.zoom .slides > section > section:not([data-transition]).past {
-webkit-transform: translate(0, -150%);
-ms-transform: translate(0, -150%);
transform: translate(0, -150%); }
.reveal .slides > section > section[data-transition=zoom].future, .reveal.zoom .slides > section > section:not([data-transition]).future {
.reveal .slides > section > section[data-transition=zoom].future, .reveal .slides > section > section[data-transition~=zoom-in].future, .reveal.zoom .slides > section > section:not([data-transition]).future {
-webkit-transform: translate(0, 150%);
-ms-transform: translate(0, 150%);
transform: translate(0, 150%); }
......@@ -601,7 +644,7 @@ body {
/*********************************************
* NO TRANSITION
*********************************************/
.reveal .slides section[data-transition=none], .reveal.none .slides section:not([data-transition]) {
.reveal .slides > section[data-transition=none], .reveal.none .slides > section:not([data-transition]) {
-webkit-transform: none;
-ms-transform: none;
transform: none;
......
css/reveal.scss
+ 31
− 31
View file @ 80e52c08
......@@ -432,39 +432,39 @@ body {
*********************************************/
@mixin transition-global($style) {
.reveal .slides>section[data-transition=#{$style}],
.reveal.#{$style} .slides>section:not([data-transition]) {
@content;
}
.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 .slides>section[data-transition~=#{$style}-out].past,
.reveal.#{$style} .slides>section:not([data-transition]).past {
@content;
}
.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;
}
.reveal .slides>section[data-transition=#{$style}].future,
.reveal .slides>section[data-transition~=#{$style}-in].future,
.reveal.#{$style} .slides>section:not([data-transition]).future {
@content;
}
}
@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;
}
.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;
}
.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;
}
}
/*********************************************
......@@ -533,21 +533,21 @@ body {
*********************************************/
@include transition-global(zoom) {
transition-timing-function: ease;
transition-timing-function: ease;
}
@include transition-horizontal-past(zoom) {
visibility: hidden;
transform: scale(16);
visibility: hidden;
transform: scale(16);
}
@include transition-horizontal-future(zoom) {
visibility: hidden;
transform: scale(0.2);
visibility: hidden;
transform: scale(0.2);
}
@include transition-vertical-past(zoom) {
transform: translate(0, -150%);
transform: translate(0, -150%);
}
@include transition-vertical-future(zoom) {
transform: translate(0, 150%);
transform: translate(0, 150%);
}
......
test/examples/slide-transitions.html 0 → 100644
+ 101
− 0
View file @ 80e52c08
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Slide Transitions</title>
<link rel="stylesheet" href="../../css/reveal.css">
<link rel="stylesheet" href="../../css/theme/white.css" id="theme">
<style type="text/css" media="screen">
.slides section.has-dark-background,
.slides section.has-dark-background h3 {
color: #fff;
}
.slides section.has-light-background,
.slides section.has-light-background h3 {
color: #222;
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h3>Default</h3>
</section>
<section>
<h3>Default</h3>
</section>
<section data-transition="zoom">
<h3>data-transition: zoom</h3>
</section>
<section data-transition="zoom-in fade-out">
<h3>data-transition: zoom-in fade-out</h3>
</section>
<section>
<h3>Default</h3>
</section>
<section data-transition="convex">
<h3>data-transition: convex</h3>
</section>
<section data-transition="convex-in concave-out">
<h3>data-transition: convex-in concave-out</h3>
</section>
<section>
<section data-transition="zoom">
<h3>Default</h3>
</section>
<section data-transition="concave">
<h3>data-transition: concave</h3>
</section>
<section data-transition="convex-in fade-out">
<h3>data-transition: convex-in fade-out</h3>
</section>
<section>
<h3>Default</h3>
</section>
</section>
<section data-transition="none">
<h3>data-transition: none</h3>
</section>
<section>
<h3>Default</h3>
</section>
</div>
</div>
<script src="../../lib/js/head.min.js"></script>
<script src="../../js/reveal.js"></script>
<script>
Reveal.initialize({
center: true,
history: true,
// transition: 'slide',
// transitionSpeed: 'slow',
// backgroundTransition: 'slide'
});
</script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment