Oliver/Phantom-Ink-Online
0
0
Fork 0
Code Issues Activity

Add animation for the expand-from-left animation

Browse source
This commit is contained in:
Oliver-Akins 2020-12-15 20:35:23 -07:00
parent aaca95f4a2
commit d02e6100db
1 changed files with 27 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

27
web/src/css/transitions.css
View file

@ -9,6 +9,33 @@
.expand-from-left-enter-active {
animation: expand-from-left 1s;
transform-origin: left;
}
.expand-from-left-leave-active {
animation: shrink-to-left 1s;
transform-origin: left;
}
@keyframes expand-from-left {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
@keyframes shrink-to-left {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
/* Transition for modal card appearing disappearing */ /* Transition for modal card appearing disappearing */
.burst-enter-active { .burst-enter-active {
animation: burst-in .5s; animation: burst-in .5s;