有一段時間沒用vue動畫了，就忘了，又仔細去看了vue官網 的過渡&動畫，記錄下來方便快速使用 (可以多看vue官網 過渡&動畫 實現更多效果)
1、實際效果
展開收起效果.gif
2、代碼
<!--css--> .box{ height:200px;width: 200px; background-color:black; } .draw-enter-active, .draw-leave-active { transition: all 1s ease; } .draw-enter, .draw-leave-to /* .fade-leave-active below version 2.1.8 */ { height: 0; } <div id="app"> <button @click="boxshow = !boxshow">點擊展開/關閉</button> <transition name="draw"> <!--這里的name 和 css 類名第一個字段要一樣--> <div class="box" v-show="boxshow"></div> </transition> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ boxshow:false }, }); </script>作者：xilong
鏈接：https://www.jianshu.com/p/6cd79c029167
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。