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

Add transition animation for the modals

Browse source
This commit is contained in:
Oliver-Akins 2020-12-08 13:51:17 -07:00
parent 594262e657
commit 17c7d053b1
1 changed files with 62 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

62
web/src/css/transitions.css Normal file
View file

@ -0,0 +1,62 @@
/* Transition for modal background appearing/disappearing */
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
/* Transition for modal card appearing disappearing */
.burst-enter-active {
animation: burst-in .5s;
}
.burst-leave-active { animation: burst-out .5s; }
@keyframes burst-in {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes burst-out {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@media only screen and (min-width: 768px) {
@keyframes burst-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
@keyframes burst-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(0);
}
}
}