記錄一下今天在vue的transition中遇到的坑
<!DOCTYPE html> <html> <head> <title>Vue中CSS動畫原理</title> <script type="text/javascript" src="../vue.min.js"></script> <!-- 定義動畫樣式 --> <style type="text/css"> .v-enter{ opacity: 0; } .v-enter-active{ transition: opacity 3s; } </style> </head> <body> <div id="root"> <!-- 動畫 --> <transition name="myfade"> <!-- name屬性的值作為fade-enter fade-enter-active等開頭的名字 --> <div v-if="show">hello world</div> </transition> <button @click="change">切換</button> </div> <script type="text/javascript"> var vm = new Vue({ el: "#root", data: { show: true }, methods: { change: function () { this.show = !this.show } } }); </script> </body> </html>
被告知 transition 的 name 屬性是可以自己隨意設置的，於是給了 myfade，結果發現沒有效果。
后來研究了下發現，這個 name 的值是用來替換 v-enter 的 v
於是修改成
<style type="text/css"> .myfade-enter{ opacity: 0; } .myfade-enter-active{ transition: opacity 3s; } </style>
就OK了~
另注：transition 只有 name 這一個屬性，且只有一個子元素，這個子元素需要 v-if 或 v-show 來控制是否顯示。