第一次打开执行的动画就不是执行了
来源:5-3 在Vue中同时使用过渡和动画
星期9
2018-04-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../../animate.min.css"> <script src="../../vue.js"></script> <title>在Vue中同时使用过渡和动画</title> <style> .fade-enter,.fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 3s; } </style> </head> <body> <div id="root"> <transition type="transition" name="fade" appear enter-active-class="animated bounceInDown fade-enter-active" leave-active-class="animated bounceOut fade-leave-active" appear-active-class="animated bounceInDown" > <div v-if="show">你好</div> </transition> <button @click="btnFcu"> 点击 </button> </div> <script> var vm = new Vue({ el: "#root", data: { show: true }, methods: { btnFcu: function () { this.show = !this.show } } }) </script> </body> </html>
加上
type="transition"
后第一次打开执行的动画就不是执行了
写回答
1回答
-
你还要写一个fade-apear, fade-appear-active的css样式
042018-09-22
相似问题