Noratrieb/slides
1
0
Fork 0
mirror of https://github.com/Noratrieb/slides.git synced 2026-01-15 17:05:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

in/out transitions for controls

Browse source
This commit is contained in:
Hakim El Hattab 2017-05-16 15:31:05 +02:00
parent 617c17be3c
commit 9e013ccbb2
4 changed files with 42 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

13
css/reveal.scss
View file

@ -286,7 +286,9 @@ body {
cursor: pointer;
color: currentColor;
transform: scale(.9999);
transition: all 0.2s ease;
transition: color 0.2s ease,
opacity 0.2s ease,
transform 0.2s ease;
z-index: 2; // above slides
pointer-events: auto;
@ -332,6 +334,7 @@ body {
.navigate-left {
right: $size + $innerSpacing*2;
bottom: $innerSpacing;
transform: translateX( -10px );
.pagination-arrow {
transform: translateY(-50%);
@ -341,12 +344,13 @@ body {
.navigate-right {
right: 0;
bottom: $innerSpacing;
transform: translateX( 10px );
.pagination-arrow {
transform: translateY(-50%) rotate( 180deg );
}
&.bounce {
&.highlight {
animation: bounce-right 2s 50 both ease-out;
}
}
@ -354,6 +358,7 @@ body {
.navigate-up {
right: $innerSpacing;
bottom: $size + $innerSpacing*2;
transform: translateY( -10px );
.pagination-arrow {
transform: translateX(-50%) rotate( 90deg );
@ -363,12 +368,13 @@ body {
.navigate-down {
right: $innerSpacing;
bottom: 0;
transform: translateY( 10px );
.pagination-arrow {
transform: translateX(-50%) rotate( -90deg );
}
&.bounce {
&.highlight {
animation: bounce-down 2s 50 both ease-out;
}
}
@ -398,6 +404,7 @@ body {
visibility: visible;
opacity: 0.7;
cursor: pointer;
transform: none;
}
// Any control button that leads to showing or hiding