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

refactor: move searchform transition to css file

Browse source
This commit is contained in:
Valentin Kaelin 2020-02-13 19:49:38 +01:00
parent 253e0a3f26
commit 5a0830b8d5
2 changed files with 24 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,19 +45,17 @@
.slide-fade-enter-active, .slide-fade-enter-active,
.slide-fade-leave-active { .slide-fade-leave-active {
transition: all 0.4s; transition: all 0.4s;
} }
.slide-fade-enter, .slide-fade-enter,
.slide-fade-leave-to { .slide-fade-leave-to {
transform: translateX(400px); transform: translateX(400px);
opacity: 0; opacity: 0;
} }
.tab-enter-active { .tab-enter-active {
transition: all; @apply transition-all transition-fast ease-out-quad;
transition-duration: 150ms;
transition-timing-function: cubic-bezier(.25, .46, .45, .94);
} }
.tab-enter { .tab-enter {
@ -68,4 +66,22 @@
opacity: 1; opacity: 1;
} }
.scale-fade-enter-active {
@apply transition-all transition-fastest ease-out-quad;
}
.scale-fade-leave-active {
@apply transition-all transition-fastest ease-in-quad;
}
.scale-fade-enter,
.scale-fade-leave-to {
@apply opacity-0 scale-90;
}
.scale-fade-enter-to,
.scale-fade-leave {
@apply opacity-100 scale-100;
}
/* purgecss end ignore */ /* purgecss end ignore */

18
client/src/components/SearchForm.vue
View file

@ -10,14 +10,7 @@
:class="[inputClasses]" :class="[inputClasses]"
class="w-full rounded-lg outline-none pl-6 pr-32 font-bold focus:bg-blue-1000" class="w-full rounded-lg outline-none pl-6 pr-32 font-bold focus:bg-blue-1000"
/> />
<transition <transition name="scale-fade">
enter-active-class="transition-all transition-fastest ease-out-quad"
leave-active-class="transition-all transition-faster ease-in-quad"
enter-class="opacity-0 scale-90"
enter-to-class="opacity-100 scale-100"
leave-class="opacity-100 scale-100"
leave-to-class="opacity-0 scale-90"
>
<SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" /> <SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" />
</transition> </transition>
@ -33,14 +26,7 @@
</svg> </svg>
</div> </div>
</div> </div>
<transition <transition name="scale-fade">
enter-active-class="transition-all transition-fastest ease-out-quad"
leave-active-class="transition-all transition-faster ease-in-quad"
enter-class="opacity-0 scale-90"
enter-to-class="opacity-100 scale-100"
leave-class="opacity-100 scale-100"
leave-to-class="opacity-0 scale-90"
>
<div <div
v-show="dropdown" v-show="dropdown"
:class="[dropdownClasses]" :class="[dropdownClasses]"