vue-常用技巧
子页面过渡动画
<script lang="ts" setup>
import { ref } from 'vue'
import { onBeforeRouteUpdate } from 'vue-router'
const transitionName = ref('slide-left') // 子页面过渡动画
// 子页的过渡动画
onBeforeRouteUpdate(async (to, from) => {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
if (toDepth > fromDepth) {
transitionName.value = 'slide-left'
} else {
transitionName.value = 'slide-right'
}
})
</script>
<template>
<!-- 子页面 -->
<router-view v-slot="{ Component }">
<transition :name="transitionName">
<component :is="Component" />
</transition>
</router-view>
</template>
<style scoped lang="scss">
// 详细页面进入过渡
.slide-left-enter-active {
transition: all .3s;
}
.slide-left-enter-from {
transform: translateX(100%);
}
.slide-left-enter-to {
transform: translateX(0);
}
// 详细页面离开过渡
.slide-right-leave-active {
transition: all .3s;
}
.slide-right-leave-from {
transform: translateX(0);
}
.slide-right-leave-to {
transform: translateX(100%);
}
</style>
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
41
42
43
44
45
46
47
48
49
50
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
41
42
43
44
45
46
47
48
49
50
vue3父组件调用子组件方法
父组件
import { ref } from 'vue'
const SchoolChoose = ref()
SchoolChoose.value.onChangeShow(true)
<template>
<School ref="SchoolChoose" />
</template>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
子组件
import { defineExpose } from 'vue'
function onChangeShow(val: boolean) {
show.value = val
}
defineExpose({
onChangeShow,
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8