鲁达 有时候我们想做一些动画效果。
过渡 transition
css的属性transition 可以实现动画过渡效果。
示例：点击按钮，让div的宽度变长。
<template> <div class="box" :style="{width:width+'px'}"></div> <button @click="change">click</button> </template> <script setup> import {ref} from 'vue' let width= ref(100) function change(){ wid += 100 } </script> <style> .box{ background:red; height:100px; transition: width 1s linear; } </style> 从图中可以看到，我们通过transition 将值可以缓慢的变成另一个值，从而实现一种过渡的效果。动画 animation和keyframe
也可以用 animation和keyframe的组合实现动画效果。示例：让方块来回在 0 - 50% - 100% 区间反复移动，持续时间：2s，线性变化。
.box1{ width:30px; height:30px; position: relative; background:#d88986; animation: move 2s linear infinite; } @keyframes move { 0% {left:0px} 50% {left:200px} 100% {left:0} } 这就是简单的动画了。
Vue3中的动画
Vue 3 中提供了一些动画的封装，使用内置的 transition 组件来控制组件的动画。
示例：点击按钮 让文字 显示/隐藏。
<template> <button @click="toggle">click</button> <h1 v-if="showTitle">你好 Vue 3</h1> </template> <script setup> import {ref} from 'vue' let showTitle = ref(true) function toggle(){ = ! } </script> 现在看着虽然可以完成 显示和隐藏的功能，但是很生硬。按照前面的思路想丝滑一些，可以加入transition进行过渡。我们看下Vue3里是如何加过渡的。
<template> <button @click="toggle">click</button> <transition name="fade"> <h1 v-if="showTitle">你好 Vue 3</h1> </transition> </template> <script setup lang="ts"> import {ref} from 'vue' let showTitle = ref(true) function toggle(){ = ! } </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s linear; } .fade-enter-from, .fade-leave-to { opacity: 0; } </style> 我们需要做下面两点,就可以实现渐隐渐现的效果了。
- 用transition标签把 想要过渡的部分夹住的同时，把name设为fade。
- 设置以fade开头的一组动画样式。
这四个样式官网的图比较好理解：
- v-enter-from里的v就是我们上面设置的name 值为fade。
- 这里在进入 和 离开的时候 是由 fade-enter-active 和 fade-leave-active 控制的。
- 进入的开始和结束，是由fade-enter-from和fade-enter-to 控制的。
详细流程可以 直接看视频
如果你觉得有点收获，欢迎点个关注， 也欢迎分享给你身边的朋友。
#头条创作挑战赛##vue3##在头条看见彼此##前端#