vue中過渡和動畫結合
阿新 • • 發佈：2018-11-21
動畫、過渡、頁面載入時就有動畫
<style> .de{ width: 100px; height: 100px; background: green; } .fade-leave-active { transition: opacity 1s; } .fade-leave-to { opacity: 0 } </style> </head> <body> <div id="demo"> <button @click="show = !show">click me</button> <transition name="fade" enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear appear-active-class="animated swing"> <div v-if="show" class="de">sfsf</div> </transition> </div> <script> new Vue({ el: '#demo', data: { show: true } }) </script> </body>
2. 動畫時長的設定
transition中的duration設定動畫時長，單位是ms。注意：每個動畫有自己的時長，各是各的，
我覺得吧，這個時長就是class樣式存在的時間，動畫和過渡跟他沒有關係
<body> <div id="demo"> <button @click="show = !show">click me</button> <transition name="fade" :duration="5000" enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear appear-active-class="animated swing"> <div v-if="show" class="de">sfsf</div> </transition> </div> <script> new Vue({ el: '#demo', data: { show: true } }) </script> </body>
也可以具體設定enter和leave的時間：
:duration="{enter:5000, leave: 10000}"