Spotify/top-lists
0
0
Fork 0
Code Issues Activity

Add CSS animations for modal appear/disappear

Browse source
This commit is contained in:
Tyler-A 2020-08-07 00:41:39 -06:00
parent aac452f788
commit 9b0261d47a
2 changed files with 63 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/App.vue
View file

@ -75,6 +75,7 @@ export default {
</script> </script>
<style> <style>
@import "./css/transitions.css";
@import "./css/dark_theme.css"; @import "./css/dark_theme.css";
@import "./css/tooltips.css"; @import "./css/tooltips.css";
@import "./css/inputs.css"; @import "./css/inputs.css";

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