Vue3+TypeScript学习笔记（十五）
导读：写在前面：除v-if外，其他的props（包括enter-active-class之类）都要写在transition标签上，直接写在原生/组件标签身上将不会有任何效果！transition也是Vue的一个内置组件，主要用来控制模板中元素的动...
写在前面：除v-if外，其他的props（包括enter-active-class之类）都要写在transition标签上，直接写在原生/组件标签身上将不会有任何效果！
- transition也是Vue的一个内置组件，主要用来控制模板中元素的动画效果。需要注意的是transition中仅能有一个根标签，否则将报错
仅能有一个根标签
!-- 正常 -->
transition>
div>
div>
/div>
/div>
/transition>
!-- 报错 -->
transition>
div>
/div>
div>
/div>
/transition>
- 安装动画库：pnpm add animate.css
| props | 作用 |
|---|---|
| name | 规定动画的类名前缀（若无则为v） |
| duration | 规定过渡的持续时间——严格来讲是含有过渡的active类出现在元素身上的时间，主要目的是防止嵌套元素中父元素过渡过早完成（传入一个number则同时控制进入和离开，传入一个{ enter:,leave:} 的对象则分别控制进入和离开） |
| enter-active-class | 进入动画的类名，如需使用动画库或不想使用name-class-enter，希望自定义动画类名时使用 |
| leave-active-class | 离开动画的类名，如需使用动画库或不想使用name-class-leave，希望自定义动画类名时使用 |
完整代码：
App.vue
template>
!-- 最简单的使用方法,仅规定了name -->
div class="card">
transition name="box">
A v-if="flag">
/A>
/transition>
button @click="flag = !flag">
显示/隐藏组件/button>
/div>
!-- 使用动画库,需要注意的是从animate.css4版本开始,动画类名前要加上animate__animated才能生效 -->
div>
transition
:duration="{
enter: 1000, leave: 0 }
"
enter-active-class="animate__animated animate__fadeInLeftBig"
>
B v-if="flag2">
/B>
/transition>
button @click="flag2 = !flag2">
显示/隐藏组件2/button>
/div>
!-- 使用类名代替three-enter-active和three-leave-active。因为是动画所以无需three-enter-from之类 -->
div>
transition name="three" enter-active-class="enterOne" leave-active-class="leaveOne">
C v-if="flag3">
/C>
/transition>
/div>
button @click="flag3 = !flag3">
显示/隐藏组件3/button>
/template>
script setup lang="ts">
import 'animate.css'
import {
ref, reactive }
from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'
let flag = ref(true)
let flag2 = ref(true)
let flag3 = ref(true)
/script>
style scoped>
.card {
border: 1px solid black;
}
.background {
width: 200px;
height: 200px;
background-color: red;
}
.box-enter-from {
width: 0;
height: 0;
}
.box-enter-active {
transition: all 1s ease;
}
.box-enter-to {
width: 200px;
height: 200px;
transform: rotate(-360deg);
}
.box-leave-from {
width: 200px;
height: 200px;
}
.box-leave-active {
transition: all 1s ease;
}
.box-leave-to {
width: 0;
height: 0;
transform: rotate(360deg);
}
.enterOne {
animation: bounce-in 1s ease;
}
.leaveOne{
animation: bounce-in 1s ease reverse;
}
@keyframes bounce-in {
from {
width: 0;
height: 0;
}
to {
width: 200px;
height: 200px;
}
}
/style>
A.vue
template>
div>
/div>
/template>
script setup lang='ts'>
import {
ref,reactive }
from 'vue'
/script>
style scoped>
div{
width: 200px;
height: 200px;
background-color: red;
}
/style>
B和C除了背景颜色background-color不一样，其他都和A相同
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Vue3+TypeScript学习笔记（十五）
本文地址： https://pptw.com/jishu/2278.html