VUE之过渡+动画

mac2024-04-22 50

大纲

（1）页面初始化渲染动画（2）transition过渡+@keyframes动画（3）过渡&&动画时长控制—type属性（4）自定义时长

页面初始化渲染动画

目前为止，已经结合animated.css动画库实现了@keyframes类型动画切换效果。【前言】如果想在页面初始化时渲染动画效果，此时需要用到appear呈现属性和appear-active-class呈现过渡属性，语法如下类名和进入的动画效果相同即可过渡+动画如果想在元素过渡的同时添加动画效果，此时又需要用到enter-active-class和leave-active-class属性步骤：1、添加过渡类名+动画名，这里为了方便查看效果，我将动画改为swing抖动，如下所示步骤：2、设置transition过渡属性值测试后发现此时便可以实现过渡+动画同时作用与指定元素时间BUG：目前为止，过渡时间与动画@keyframes类型时间还不一致，这里过渡时间为3s，查看源码后发现动画库的延时为1秒如果时间不进行统一，可能导致不可预测的bug，影响vue项目性能，所以需要统一时间

过渡时长type属性

一般为了效果执行完毕，时长以较长的为准，所以这里以过渡时长transition为准，此时需要添加type属性，语法如下（1）type=”transition” （1）type=”transition”以过渡时长为准，测试如下

动画时长type属性

除此之外，也可以以@keyframes动画时长为准，语法如下（2）type=”animation” 验证方法和之前类似，控制台检测即可。

自定义时长

除了使用transition标签元素的type属性去指定时长外，也可以自定义时长，此时需要用到duration延迟属性，如法如下入场时长+出场时长除了统一设定时长外，也可以分开设置入场+出场时长，如下所示注意：duration延时属性，如果想识别后面的表达式，需要利用v-bind动态绑定该属性，否则会报错。

Vue之过渡＋动画代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <link rel="stylesheet" type="text/css" href="css/animate.min.css" /> <script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .demo { width: 200px; height: 200px; background: red; } .demo1 { width: 200px; height: 200px; background: green; } .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 3s; } .fade-enter-to, .fade-leave { opacity: 1; } </style> </head> <body> <div id="root"> <transition v-bind:duration="{enter:3000,leave:2000}" type="animation" appear appear-active-class="animated swing" enter-active-class="animated swing fade-enter-active" leave-active-class="animated swing fade-leave-active" name="fade"> <div class="demo" v-show="status"></div> </transition> <button @click="handleClick">toggle</button> </div> <script type="text/javascript"> var root = new Vue({ el: '#root', data: { status: true }, methods: { handleClick() { this.status = !this.status; } } }) </script> </body> </html>

完毕！若有疑问请随时联系小编。

最新回复(0)