438 lines
11 KiB
Vue
438 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
v-if="rendered"
|
|||
|
|
ref="rootRef"
|
|||
|
|
class="u-transition"
|
|||
|
|
:class="[customClass, animationClass]"
|
|||
|
|
:style="$u.toStyle(animationStyle, customStyle)"
|
|||
|
|
@animationstart="handleAnimationStart"
|
|||
|
|
@animationend="handleAnimationEnd"
|
|||
|
|
>
|
|||
|
|
<slot />
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
export default {
|
|||
|
|
name: 'u-transition',
|
|||
|
|
options: {
|
|||
|
|
addGlobalClass: true,
|
|||
|
|
// #ifndef MP-TOUTIAO
|
|||
|
|
virtualHost: true,
|
|||
|
|
// #endif
|
|||
|
|
styleIsolation: 'shared'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { computed, nextTick, ref, watch } from 'vue';
|
|||
|
|
import { TransitionProps } from './types';
|
|||
|
|
import { $u } from '../..';
|
|||
|
|
import type { TransitionDuration } from '../../types/global';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* transition 过渡动画
|
|||
|
|
* @description 统一的过渡与进出场动效封装，支持多种预设动画和自定义时长。
|
|||
|
|
* @tutorial https://uviewpro.cn/zh/components/transition.html
|
|||
|
|
* @property {Boolean} show 是否展示内容（默认true）
|
|||
|
|
* @property {String} name 预设动画名，可选 fade/slide-up/slide-down/slide-left/slide-right/zoom-in/zoom-out（默认fade）
|
|||
|
|
* @property {String} mode 进入/离开过渡模式，等同于原生 transition 的 mode（默认空）
|
|||
|
|
* @property {Number|Object} duration 进入/离开动画时长，单位ms，支持 { enter, leave }（默认300）
|
|||
|
|
* @property {String} timing-function 动画曲线（默认cubic-bezier(0.2,0.8,0.2,1)）
|
|||
|
|
* @property {Number} delay 动画延迟，单位ms（默认0）
|
|||
|
|
* @property {Boolean} appear 首次渲染时是否执行动画（默认false）
|
|||
|
|
* @property {String} custom-class 自定义 class
|
|||
|
|
* @property {String|Object} custom-style 自定义样式
|
|||
|
|
* @example <u-transition :show="visible" name="slide-up"><view>content</view></u-transition>
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
const props = defineProps(TransitionProps);
|
|||
|
|
|
|||
|
|
const emit = defineEmits([
|
|||
|
|
'before-enter',
|
|||
|
|
'enter',
|
|||
|
|
'after-enter',
|
|||
|
|
'enter-cancelled',
|
|||
|
|
'before-leave',
|
|||
|
|
'leave',
|
|||
|
|
'after-leave',
|
|||
|
|
'leave-cancelled'
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const normalizeDuration = (duration: number | TransitionDuration) => {
|
|||
|
|
if (typeof duration === 'number') {
|
|||
|
|
return {
|
|||
|
|
enter: duration,
|
|||
|
|
leave: duration
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
enter: duration?.enter ?? 300,
|
|||
|
|
leave: duration?.leave ?? duration?.enter ?? 300
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const rootRef = ref();
|
|||
|
|
const rendered = ref<boolean>(props.show);
|
|||
|
|
const animationPhase = ref<'enter' | 'leave' | ''>('');
|
|||
|
|
const animating = ref(false);
|
|||
|
|
const initialized = ref(false);
|
|||
|
|
|
|||
|
|
const transitionDuration = computed(() => normalizeDuration(props.duration));
|
|||
|
|
|
|||
|
|
const animationStyle = computed(() => {
|
|||
|
|
const currentDuration =
|
|||
|
|
animationPhase.value === 'leave' ? transitionDuration.value.leave : transitionDuration.value.enter;
|
|||
|
|
return {
|
|||
|
|
'--u-transition-duration-enter': `${transitionDuration.value.enter}ms`,
|
|||
|
|
'--u-transition-duration-leave': `${transitionDuration.value.leave}ms`,
|
|||
|
|
'--u-transition-delay': `${props.delay}ms`,
|
|||
|
|
'--u-transition-timing': props.timingFunction,
|
|||
|
|
animationDuration: `${currentDuration}ms`,
|
|||
|
|
animationDelay: `${props.delay}ms`,
|
|||
|
|
animationTimingFunction: props.timingFunction
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const animationClass = computed(() => {
|
|||
|
|
if (!animationPhase.value) {
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
return `u-transition-${props.name}-${animationPhase.value}`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const getEl = () => rootRef.value as any;
|
|||
|
|
|
|||
|
|
const startEnter = () => {
|
|||
|
|
if (animating.value && animationPhase.value === 'enter') {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (animating.value && animationPhase.value === 'leave') {
|
|||
|
|
emit('leave-cancelled', getEl());
|
|||
|
|
}
|
|||
|
|
rendered.value = true;
|
|||
|
|
animationPhase.value = 'enter';
|
|||
|
|
animating.value = true;
|
|||
|
|
emit('before-enter', getEl());
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const startLeave = () => {
|
|||
|
|
if (!rendered.value) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (animating.value && animationPhase.value === 'leave') {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (animating.value && animationPhase.value === 'enter') {
|
|||
|
|
emit('enter-cancelled', getEl());
|
|||
|
|
}
|
|||
|
|
animationPhase.value = 'leave';
|
|||
|
|
animating.value = true;
|
|||
|
|
emit('before-leave', getEl());
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAnimationStart = () => {
|
|||
|
|
if (animationPhase.value === 'enter') {
|
|||
|
|
emit('enter', getEl());
|
|||
|
|
} else if (animationPhase.value === 'leave') {
|
|||
|
|
emit('leave', getEl());
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAnimationEnd = () => {
|
|||
|
|
if (animationPhase.value === 'enter') {
|
|||
|
|
animating.value = false;
|
|||
|
|
animationPhase.value = '';
|
|||
|
|
emit('after-enter', getEl());
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (animationPhase.value === 'leave') {
|
|||
|
|
animating.value = false;
|
|||
|
|
animationPhase.value = '';
|
|||
|
|
rendered.value = false;
|
|||
|
|
emit('after-leave', getEl());
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 根据mode处理动画顺序（主要用于快速切换时的时序控制）
|
|||
|
|
const shouldWaitForAnimation = (newPhase: 'enter' | 'leave') => {
|
|||
|
|
if (!animating.value) return false;
|
|||
|
|
|
|||
|
|
const currentPhase = animationPhase.value;
|
|||
|
|
|
|||
|
|
// 如果当前正在进行相反的动画，根据mode决定是否需要等待
|
|||
|
|
if (props.mode === 'out-in' && currentPhase === 'leave' && newPhase === 'enter') {
|
|||
|
|
return true; // 等待离开动画完成
|
|||
|
|
}
|
|||
|
|
if (props.mode === 'in-out' && currentPhase === 'enter' && newPhase === 'leave') {
|
|||
|
|
return true; // 等待进入动画完成
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.show,
|
|||
|
|
value => {
|
|||
|
|
if (!initialized.value) {
|
|||
|
|
initialized.value = true;
|
|||
|
|
if (value) {
|
|||
|
|
rendered.value = true;
|
|||
|
|
if (props.appear) {
|
|||
|
|
nextTick(() => startEnter());
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
rendered.value = false;
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (value) {
|
|||
|
|
if (shouldWaitForAnimation('enter')) {
|
|||
|
|
// 根据mode等待当前动画完成后再开始进入动画
|
|||
|
|
// 简单的方式：延迟到下一个tick检查
|
|||
|
|
nextTick(() => {
|
|||
|
|
if (!animating.value) {
|
|||
|
|
startEnter();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
startEnter();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (shouldWaitForAnimation('leave')) {
|
|||
|
|
// 根据mode等待当前动画完成后再开始离开动画
|
|||
|
|
nextTick(() => {
|
|||
|
|
if (!animating.value) {
|
|||
|
|
startLeave();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
startLeave();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ immediate: true }
|
|||
|
|
);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@import '../../libs/css/style.components.scss';
|
|||
|
|
|
|||
|
|
.u-transition {
|
|||
|
|
// display: inline-flex;
|
|||
|
|
// width: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@mixin animation-base {
|
|||
|
|
animation-fill-mode: both;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-transition-fade-enter {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-fade-in;
|
|||
|
|
}
|
|||
|
|
.u-transition-fade-leave {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-fade-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-transition-slide-up-enter {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-slide-up-in;
|
|||
|
|
}
|
|||
|
|
.u-transition-slide-up-leave {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-slide-up-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-transition-slide-down-enter {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-slide-down-in;
|
|||
|
|
}
|
|||
|
|
.u-transition-slide-down-leave {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-slide-down-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-transition-slide-left-enter {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-slide-left-in;
|
|||
|
|
}
|
|||
|
|
.u-transition-slide-left-leave {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-slide-left-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-transition-slide-right-enter {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-slide-right-in;
|
|||
|
|
}
|
|||
|
|
.u-transition-slide-right-leave {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-slide-right-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-transition-zoom-in-enter {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-zoom-in-in;
|
|||
|
|
}
|
|||
|
|
.u-transition-zoom-in-leave {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-zoom-in-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-transition-zoom-out-enter {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-zoom-out-in;
|
|||
|
|
}
|
|||
|
|
.u-transition-zoom-out-leave {
|
|||
|
|
@include animation-base;
|
|||
|
|
animation-name: u-transition-zoom-out-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes u-transition-fade-in {
|
|||
|
|
0% {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes u-transition-fade-out {
|
|||
|
|
0% {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes u-transition-slide-up-in {
|
|||
|
|
0% {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate3d(0, 40rpx, 0);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translate3d(0, 0, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@keyframes u-transition-slide-up-out {
|
|||
|
|
0% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translate3d(0, 0, 0);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate3d(0, 40rpx, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes u-transition-slide-down-in {
|
|||
|
|
0% {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate3d(0, -40rpx, 0);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translate3d(0, 0, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@keyframes u-transition-slide-down-out {
|
|||
|
|
0% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translate3d(0, 0, 0);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate3d(0, -40rpx, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes u-transition-slide-left-in {
|
|||
|
|
0% {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate3d(40rpx, 0, 0);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translate3d(0, 0, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@keyframes u-transition-slide-left-out {
|
|||
|
|
0% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translate3d(0, 0, 0);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate3d(40rpx, 0, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes u-transition-slide-right-in {
|
|||
|
|
0% {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate3d(-40rpx, 0, 0);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translate3d(0, 0, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@keyframes u-transition-slide-right-out {
|
|||
|
|
0% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translate3d(0, 0, 0);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate3d(-40rpx, 0, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes u-transition-zoom-in-in {
|
|||
|
|
0% {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: scale(0.85);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@keyframes u-transition-zoom-in-out {
|
|||
|
|
0% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: scale(0.85);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes u-transition-zoom-out-in {
|
|||
|
|
0% {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@keyframes u-transition-zoom-out-out {
|
|||
|
|
0% {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|