Vue动画与过渡

本文最后更新于:2023年7月28日 凌晨

Vue内置的<Transition><TransitionGroup>组件可以方便的为组件插入CSS动画

  • v-if,v-show,<component :is="xxx" />组件应用<Transition>包裹
  • v-for组件应用<TransitionGroup>包裹

Transition组件

<Transiton/>没有name属性时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.<name>-enter-from {
/* 入场动画第一帧 */
}

.<name>-leave-to {
/* 出场动画末尾帧 */
}

.<name>-enter-active {
/* */
}

.<name>-leave-active {
/* */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script setup>
import { ref } from 'vue'

const visible = ref(true)

function changeVisible() {
visible.value = !visible.value
}
</script>

<template>
<Transition>
<h1
:v-show="visible"
@click="changeVisible"
>
Hello World!
</h1>
</Transition>
</template>

<style scoped>

</style>

还可用CSSanimation属性设置动画

1
2
3
4
5
6
7
8
9
10
11
12
.<name>-enter-active {
animation: enter .5s;
}

@keyframs enter {
from {
opcity: 0;
}
to {
opcity: 1;
}
}

TransitionGroup组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup>


</script>

<template>
<TransitionGroup name="list" tag="ul">
<li v-for="item in List" :key="item.id">
{{ item.title }}
</li>
</TransitionGroup>
</template>

<style scoped>

</style>

Vue动画与过渡
https://qingshaner.com/vue动画与过渡/
作者
清山
发布于
2022年1月23日
许可协议