【Vue3】 第十六部分 transition

【Vue3】 第十六部分 transition

【Vue3】 第十六部分 transition

文章目录

• 【Vue3】 第十六部分 transition
• 16. transition
• • 16.1 transition的基本使用(name属性)
  • 16.2 transition+animate.css使用
  • 16.3 transition中Appear属性
  • 16.4 transitionGroup
  • • 16.4.1 配合animate使用
    • 16.4.2 平移过渡动画
    • 16.4.3 状态过渡
• 总结

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去过渡,它可以接收一个对象(num,{newVal:newVal,// 持续时间duration:3,// 过渡曲线ease:"espo.out"})})
</script><template><div><div><input type="number" v-model="num.current" step="30"><transition-group><h2>{{Fixed()}}</h2></transition-group></div></div>
</template><style scoped lang='less'>
</style>

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！