87 lines
1.3 KiB
Vue
87 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
name?: string;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<transition :name="name || 'fade'" mode="out-in" appear>
|
|
<slot></slot>
|
|
</transition>
|
|
</template>
|
|
|
|
<style>
|
|
/* 淡入淡出 */
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 滑动 */
|
|
.slide-left-enter-active,
|
|
.slide-left-leave-active,
|
|
.slide-right-enter-active,
|
|
.slide-right-leave-active {
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.slide-left-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
.slide-left-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
.slide-right-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
.slide-right-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
/* 缩放 */
|
|
.scale-enter-active,
|
|
.scale-leave-active {
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.scale-enter-from,
|
|
.scale-leave-to {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* 弹跳 */
|
|
.bounce-enter-active {
|
|
animation: bounce-in 0.5s;
|
|
}
|
|
.bounce-leave-active {
|
|
animation: bounce-in 0.5s reverse;
|
|
}
|
|
@keyframes bounce-in {
|
|
0% {
|
|
transform: scale(0.95);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|