【Vue3】 第十六部分 transition
文章目录
16. transition
16.1 transition的基本使用(name属性)
<script lang="ts" setup>
import {ref} from 'vue'
const flag = ref<boolean>(true)
</script>
<template>
<div>
<button @click="flag = !flag">切换</button>
<transition name="fade">
<h1 v-if="flag">大家好!</h1>
</transition>
</div>
</template>
<style scoped lang='less'>
// 根据所取的名字,会提供6个类
.fade-enter-from{
// 进入时的过渡前
opacity: 0;
}
.fade-enter-active{
// 进入时的过渡中
transition: all 1s ease;
}
.fade-enter-to{
// 进入时的过渡结束
opacity: 1;
}
.fade-leave-from{
// 离开时的过渡前
opacity: 1;
}
.fade-leave-active{
// 离开时的过渡中
transition: all 1s ease;
}
.fade-leave-to{
// 离开时的过渡结束
opacity: 0;
}
</style>
16.2 transition+animate.css使用
安装animate.css
$ npm install animate.css --save
$ yarn add animate.css
<script lang="ts" setup>
import {ref} from 'vue'
// 引入样式
import 'animate.css';
const flag = ref<boolean>(true)
</script>
<template>
<div>
<button @click="flag = !flag">切换</button>
<!-- 直接使用这两个属性,因为开头和结尾都只有一帧而已 -->
<transition enter-active-class="animate__animated animate__bounceInDown" leave-active-class="animate__animated animate__fadeOutDown">
<h1 v-if="flag">大家好!</h1>
</transition>
</div>
</template>
16.3 transition中Appear属性
这个属性可以在页面加载完后立即执行对应的状态,也就是立即执行动画过渡效果
<script lang="ts" setup>
import {ref} from 'vue'
import 'animate.css';
const flag = ref<boolean>(true)
</script>
<template>
<div>
<!-- 页面加载完后立即执行-->
<transition appear appear-active-class="animate__animated animate__bounceInDown">
<h1 v-if="flag">大家好!</h1>
</transition>
</div>
</template>
16.4 transitionGroup
16.4.1 配合animate使用
用于同时渲染整个列表,例如:使用v-for
的时候
<script lang="ts" setup>
import {ref} from 'vue'
import "animate.css"
const list = ref<number[]>([1,2,3])
const add = () =>{
list.value.push(list.value.length + 1)
}
const del = () =>{
list.value.pop()
}
</script>
<template>
<div>
<div class="wrapper">
<transition-group enter-active-class="animate__animated animate__lightSpeedInRight" leave-active-class="animate__animated animate__rotateOutDownLeft">
<div class="item" v-for="item in list" :key="item">{{item}}</div>
</transition-group>
</div>
<button @click="add">add</button>
<button @click="del">del</button>
</div>
</template>
<style scoped lang='less'>
.wrapper{
display: flex;
.item{
margin: 5px;
}
}
</style>
16.4.2 平移过渡动画
$ npm i -g npm
$ npm i --save lodash
<script lang="ts" setup>
import _ from 'lodash';
import { ref } from 'vue';
let list = ref(Array.apply(null, { length: 81 } as number[]).map((_, index) => {
return {
id: index,
num: index % 9 + 1
}
}))
const handleRandom = () =>{
list.value = _.shuffle(list.value)
}
</script>
<template>
<div>
<button @click="handleRandom">随机排序</button>
<div class="wrapper">
<!-- move-class:平移变化 -->
<transition-group move-class="move">
<div class="item" v-for="item in list" :key="item.id">{{item.num}}</div>
</transition-group>
</div>
</div>
</template>
<style scoped lang='less'>
.wrapper{
display: flex;
flex-wrap: wrap;
width: calc(40px*9 + 9px);
border-left:1px solid black ;
border-top:1px solid black ;
.item{
border: 1px solid black;
padding: 5px;
width: 30px;
line-height: 30px;
text-align: center;
border-left: none;
border-top: none ;
}
}
.move{
transition: all 1s;
}
</style>
16.4.3 状态过渡
npm install gsap
<script lang="ts" setup>
import {reactive, ref, watch} from 'vue'
import gsap from "gsap";
import "animate.css"
const num = reactive({
current:0,
newVal:0
})
// 监视当前的值是否发生变化
watch(()=>num.current,(newVal,oldVal) =>{
// 使用这个gasp去过渡,它可以接收一个对象
gsap.to(num,{
newVal:newVal,
// 持续时间
duration:3,
// 过渡曲线
ease:"espo.out"
})
})
</script>
<template>
<div>
<div>
<input type="number" v-model="num.current" step="30">
<transition-group>
<h2>{{num.newVal.toFixed()}}</h2>
</transition-group>
</div>
</div>
</template>
<style scoped lang='less'>
</style>
总结
以上就是今天要讲的内容,希望对大家有所帮助!!!