湛兮
41 lines
781 B
TypeScript
41 lines
781 B
TypeScript
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
|
|
}
|
|
}
|
|
}
|
|
]
|
|
]
|
|
);
|
|
}
|
|
});
|