Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: ripple effects work again

Browse source
This commit is contained in:
Valentin Kaelin 2020-03-07 13:29:48 +01:00
parent 493195e0dc
commit eb40fb11af
2 changed files with 35 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
client/src/assets/css/transition.css
View file

@ -35,6 +35,7 @@
transform: scale(1); transform: scale(1);
} }
/* Fade transition */
.fade-enter-active, .fade-leave-active { .fade-enter-active, .fade-leave-active {
transition: opacity 2s; transition: opacity 2s;
} }
@ -43,6 +44,7 @@
opacity: 0; opacity: 0;
} }
/* Slide fade transition (match details) */
.slide-fade-enter-active, .slide-fade-enter-active,
.slide-fade-leave-active { .slide-fade-leave-active {
transition: all 0.4s; transition: all 0.4s;
@ -54,6 +56,7 @@
opacity: 0; opacity: 0;
} }
/* Tab transition */
.tab-enter-active { .tab-enter-active {
@apply transition-all transition-fast ease-out-quad; @apply transition-all transition-fast ease-out-quad;
} }
@ -66,6 +69,7 @@
opacity: 1; opacity: 1;
} }
/* Scale-fade transition */
.scale-fade-enter-active { .scale-fade-enter-active {
@apply transition-all transition-fastest ease-out-quad; @apply transition-all transition-fastest ease-out-quad;
} }
@ -84,4 +88,35 @@
@apply opacity-100 scale-100; @apply opacity-100 scale-100;
} }
/* Grow transition (ripples) */
.grow-enter-active,
.grow-enter-to-active {
transition: all 1500ms ease-out;
}
.grow-leave-active,
.grow-leave-to-active {
transition: all 700ms ease-out;
}
.grow-enter {
transform: scale(0);
opacity: 1;
}
.grow-enter-to {
transform: scale(4);
opacity: 1;
}
.grow-leave {
transform: scale(4);
opacity: 1;
}
.grow-leave-to {
transform: scale(4);
opacity: 0;
}
/* purgecss end ignore */ /* purgecss end ignore */

32
client/src/components/Common/Ripple.vue
View file

@ -75,35 +75,3 @@ export default {
} }
} }
</script> </script>
<style>
.grow-enter-active,
.grow-enter-to-active {
transition: all 1500ms ease-out;
}
.grow-leave-active,
.grow-leave-to-active {
transition: all 700ms ease-out;
}
.grow-enter {
transform: scale(0);
opacity: 1;
}
.grow-enter-to {
transform: scale(4);
opacity: 1;
}
.grow-leave {
transform: scale(4);
opacity: 1;
}
.grow-leave-to {
transform: scale(4);
opacity: 0;
}
</style>