1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| 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
| }
| }
| }
| ]
| ]
| );
| }
| });
|
|