hotline-web/src/utils/motion.ts

import { h, defineComponent, withDirectives, resolveDirective } from 'vue';

/** 封装@vueuse/motion动画库中的自定义指令v-motion */
export default defineComponent({
	name: 'Motion',
	props: {
		delay: {
			type: Number,
			default: 50,
		},
	},
	render() {
		const { delay } = this;
		const motion = resolveDirective('motion');
		return withDirectives(
			h(
				'div',
				{},
				{
					default: () => [this.$slots.default()],
				}
			),
			[
				[
					motion,
					{
						initial: { opacity: 0, y: 100 },
						enter: {
							opacity: 1,
							y: 0,
							transition: {
								delay,
							},
						},
					},
				],
			]
		);
	},
});