0
0
Fork 0

Add a popularity modal to the page when clicking on the popularity value (finishes #5 )

This commit is contained in:
Tyler-A 2020-07-07 21:23:48 -06:00
parent 7ea4f89522
commit 4a61eec9ff
11 changed files with 205 additions and 19 deletions

62
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);
}
}
}