在Vue中同时使用过渡和动画

2025-02-07 技术教程

加一个功能，当刷新页面的时候也有动画效果(加上appear和appear-active-class="animated rubberBand"：

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./animate.css"> <script src="./vue.js"></script> </head><body> <div id="root"> //name随便取名:  //自定义class名字： <transition name="fade" appear enter-active-class="animated rubberBand" leave-active-class="animated hinge" appear-active-class="animated rubberBand" > <div v-show="show">hello</div> </transition> <button @click="handleClick">切换</button> </div> <script type="text/javascript"> var vm = new Vue({ el: "#root", data: { show: true }, methods: { handleClick: function() { this.show = !this.show } } }); </script></body></html>

如果过渡和库的动画都有：

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./animate.css"> <script src="./vue.js"></script>  <style type="text/css"> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 3s } </style></head><body> <div id="root"> //name随便取名:  //自定义class名字： <transition name="fade" appear enter-active-class="animated rubberBand fade-enter-active" leave-active-class="animated hinge fade-leave-active" appear-active-class="animated rubberBand" > <div v-show="show">hello</div> </transition> <button @click="handleClick">切换</button> </div> <script type="text/javascript"> var vm = new Vue({ el: "#root", data: { show: true }, methods: { handleClick: function() { this.show = !this.show } } }); </script></body></html>

但是，问题是，animate库的动画时长是1s，而我自己设置的是3s，所以要统一下时间。用type="transition"，意思是以transition时间为准：

(但是经过测试，发现有问题)

还可以设置时间duration="10000"，单位毫秒。还可以设置更细:duration="{enter: 5000, leave: 1000}"：

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./animate.css"> <script src="./vue.js"></script>  <style type="text/css"> .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 3s; } </style></head><body> <div id="root"> //自定义class名字： <transition :duration="{enter: 5000, leave: 1000}" name="fade" appear enter-active-class="animated rubberBand fade-enter-active" leave-active-class="animated hinge fade-leave-active" appear-active-class="animated rubberBand" > <div v-show="show">hello</div> </transition> <button @click="handleClick">切换</button> </div> <script type="text/javascript"> var vm = new Vue({ el: "#root", data: { show: true }, methods: { handleClick: function() { this.show = !this.show } } }); </script></body></html>