auto-animate example in demo

master
Hakim El Hattab 2020-05-19 10:22:19 +02:00
parent 815557c1d8
commit 9d11927066
7 changed files with 81 additions and 29 deletions

49
css/layout.scss 100644
View File

@ -0,0 +1,49 @@
/**
* Layout helpers.
*/
// Stretch an element vertically based on available space
.reveal .stretch,
.reveal .r-stretch {
max-width: none;
max-height: none;
}
.reveal pre.stretch code,
.reveal pre.r-stretch code {
height: 100%;
max-height: 100%;
box-sizing: border-box;
}
// Stack multiple elements on top of each other
.reveal .r-stack {
display: grid;
}
.reveal .r-stack > * {
grid-area: 1/1;
margin: auto;
}
// Horizontal and vertical stacks
.reveal .r-vstack,
.reveal .r-hstack {
display: flex;
}
.reveal .r-vstack {
flex-direction: column;
}
.reveal .r-hstack {
flex-direction: row;
}
.reveal .items-center {
align-items: center;
}
.reveal .justify-center {
justify-content: center;
}

View File

@ -6,6 +6,7 @@
* Copyright (C) Hakim El Hattab, https://hakim.se
*/
@import 'layout';
/*********************************************
* GLOBAL STYLES
@ -213,30 +214,6 @@ html.reveal-full-page {
position: relative;
}
// Layout helper: Stretch an element vertically based on available space
.reveal .stretch,
.reveal .r-stretch {
max-width: none;
max-height: none;
}
.reveal pre.stretch code,
.reveal pre.r-stretch code {
height: 100%;
max-height: 100%;
box-sizing: border-box;
}
// Layout helper: Stack multiple elements on top of each other
.reveal .r-stack {
display: grid;
}
.reveal .r-stack > * {
grid-area: 1/1;
margin: auto;
}
/*********************************************
* CONTROLS

View File

@ -137,6 +137,32 @@
</p>
</section>
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
<h2>Auto-Animate</h2>
<p>Automatically animate matching elements across slides with <a href="https://revealjs.netlify.app/auto-animate/">Auto-Animate</a>.</p>
<div class="r-hstack justify-center">
<div data-id="box1" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
<div data-id="box2" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
<div data-id="box3" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
</div>
</section>
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
<div class="r-hstack justify-center">
<div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px;"></div>
<div data-id="box2" data-auto-animate-delay="0.1" style="background: magenta; width: 150px; height: 100px; margin: 10px;"></div>
<div data-id="box3" data-auto-animate-delay="0.2" style="background: yellow; width: 150px; height: 100px; margin: 10px;"></div>
</div>
<h2 style="margin-top: 20px;">Auto-Animate</h2>
</section>
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
<div class="r-stack">
<div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div>
<div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div>
<div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div>
</div>
<h2 style="margin-top: 20px;">Auto-Animate</h2>
</section>
<section>
<h2>Touch Optimized</h2>
<p>

4
dist/reveal.css vendored

File diff suppressed because one or more lines are too long

2
dist/reveal.esm.js vendored
View File

@ -1,5 +1,5 @@
/*!
* reveal.js 4.0.0-dev (Mon May 18 2020)
* reveal.js 4.0.0-rc.1 (Tue May 19 2020)
* https://revealjs.com
* MIT licensed
*

2
dist/reveal.js vendored
View File

@ -1,5 +1,5 @@
/*!
* reveal.js 4.0.0-dev (Mon May 18 2020)
* reveal.js 4.0.0-rc.1 (Tue May 19 2020)
* https://revealjs.com
* MIT licensed
*

View File

@ -260,7 +260,7 @@ gulp.task('serve', () => {
], gulp.series('css-themes'))
gulp.watch([
'css/reveal.scss',
'css/*.scss',
'css/print/*.{sass,scss,css}'
], gulp.series('css-core'))