之前用jquery實現(xiàn)還很簡單，然后用vue就一直不行，然后在網上找了很多，又仔細看了vue官網 的過渡&動畫，發(fā)現(xiàn)其實很簡單 (可以多看vue官網 過渡&動畫 實現(xiàn)更多效果)
1、實際效果
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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
