在Vue中使用 animate.css 库

2024-11-16 技术教程

要在class的样式中加上transform-origin: left center，不然可能会出问题：

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.js"></script>  <style type="text/css"> @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(15); } 100% { transform: scale(1); } } .fade-enter-active { transform-origin: left center; animation: bounce-in 1s; } .fade-leave-active { transform-origin: left center; animation: bounce-in 1s reverse; } </style></head><body> <div id="root"> //name随便取名: <transition name="fade"> <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>

当然，还可以自定义style中的class名：

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.js"></script>  <style type="text/css"> @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(15); } 100% { transform: scale(1); } } /*.fade-enter-active { transform-origin: left center; animation: bounce-in 1s; } .fade-leave-active { transform-origin: left center; animation: bounce-in 1s reverse; }*/ .haha-active { transform-origin: left center; animation: bounce-in 1s; } .haha-leave { transform-origin: left center; animation: bounce-in 1s reverse; } </style></head><body> <div id="root"> //name随便取名:  //自定义class名字： <transition name="fade" enter-active-class="haha-active" leave-active-class="haha-leave"> <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>

自己命名class名有个好处，可以用别人的动画。css在这个网址下载：https://daneden.github.io/animate.css/

<!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" enter-active-class="animated rubberBand" leave-active-class="animated hinge"> <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>