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

Add top-slide animation

Browse source
This commit is contained in:
Oliver-Akins 2020-12-31 12:57:52 -07:00
parent e71c58c78a
commit 67849abfeb
1 changed files with 27 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,33 @@
/* Transition for modal card appearing disappearing */
.top-slide-enter-active {
animation: top-slide-in 1s;
}
.top-slide-leave-active { animation: top-slide-out 1s; }
@keyframes top-slide-in {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
@keyframes top-slide-out {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
/* Transition for past questions expanding in */
.expand-from-left-enter-active { .expand-from-left-enter-active {
animation: expand-from-left 1s; animation: expand-from-left 1s;
transform-origin: left; transform-origin: left;
@ -61,7 +88,6 @@
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
@keyframes burst-in { @keyframes burst-in {
0% { 0% {