位置: IT常识 - 正文
Vue过渡和动画效果展示（案例、GIF动图演示、附源码）(vue数据加载完成显示页面过渡动画)
编辑：rootadmin本篇文章主要写了Vue过渡和动画基础、多个元素过渡和多个组件过渡，以及列表过渡的动画效果展示。详细案例分析、GIF动图演示、附源码地址获取。 ... 前言
本文链接地址:https://www.jiuchutong.com/zhishi/303220.html
转载请保留说明！
推荐整理分享Vue过渡和动画效果展示（案例、GIF动图演示、附源码）(vue数据加载完成显示页面过渡动画)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue过渡动画 translate,vue数据加载完成显示页面过渡动画,vue过渡效果在哪设置,vue过渡动画 translate,vue过渡效果在哪设置,vue过渡动画 translate,vue过渡动画效果例子,vue过渡动画效果例子,内容如对您有帮助，希望把文章链接给更多的朋友！
本篇随笔主要写了Vue过渡和动画基础、多个元素过渡和多个组件过渡，以及列表过渡的动画效果展示。详细案例分析、GIF动图演示、附源码地址获取。
作为自己对Vue过渡和动画效果知识的总结与笔记。
因内容有案例解读，代码实现，导致篇幅稍长，大约3分钟可以浏览完，如有需要的话（请笔友耐心看完，也可按目录查找所需内容）
如需要全部案例代码：请到文章末尾获取（百度网盘链接，全套案例源码）
案例实现模版：PS: 点击模版后的 --> 这个标志可以浏览目录结构，以便快速定位需要的内容
以下案例均是基于此模版实现的（以第一个案例为例）
效果展示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <!-- 此处为引用JS、CSS等文件区、且css,文件与html文件在同一目录下 -->10 <script src="velocity.js"></script>11 <script src="vue.js"></script>12 <script src="velocity.min.js"></script>13 <script src="lodash.js"></script>14 <script src="lodash.min.js"></script>15 16 <link rel="stylesheet" href="animate.css">17 <link rel="stylesheet" href="animate.min.css">18 19 <!-- 此处为样式引用 -->20 <style>21 /* 图形的初始状态 */22 .chart {23 width: 200px;24 height: 50px;25 background-color: orange;26 }27 28 /* 进入和离开的过程 */29 .box-enter-active,30 .box-leave-active {31 transition: width 3s;32 /* width的变化，动画时间是3秒 */33 }34 35 /* 进入初始状态 和 离开的结束状态*/36 .box-enter,37 .box-leave-to {38 width: 0px;39 }40 41 /* 进入的结束状态 和 离开的初始状态 */42 .box-enter-to,43 .box-leave {44 width: 200px;45 }46 </style>47 </head>48 49 <body>50 51 <!-- 此处为主代码区 -->52 <div id="app">53 <button @click="toggle">改变图形宽度</button>54 <transition name="box">55 <div class="chart" v-if="show"></div>56 </transition>57 </div>58 <script>59 var vm = new Vue({60 el: '#app',61 data: {62 show: true,63 },64 methods: {65 toggle() {66 this.show = !this.show // 每次都取反67 }68 }69 })70 </script>71 72 </body>73 74 </html>一、Vue过渡和动画基础1.什么是过渡和动画过渡，简而言之，就是从一个状态向另外一个状态插入值，新的状态替换了旧的状态。
通过<transition>标签搭配CSS动画（如@keyframes）可以实现动画效果。动画相比过渡来说，动画可以在一个
上一篇：python怎么将整数反转输出(python怎么将整数转化为字符串)
下一篇：GCC strict aliasing – 嫉妒就是承认自己不如别人
