如下所示：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>動畫</title><script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <style> .box{ height:500px; background-color:black; overflow: hidden; }//給過渡的name加樣式 .mybox-leave-active,.mybox-enter-active{ transition: all 1s ease; } .mybox-leave-active,.mybox-enter{ height:0px !important; } .mybox-leave,.mybox-enter-active{ height: 500px; } </style></head><body><!-- 首先將要過渡的元素用transition包裹，并設置過渡的name） --> <div id="box"> <transition name="mybox"> <div class="box" v-show="boxshow"></div> </transition> <button @click="togglebox">按鈕</button></div> <script> new Vue({ el:'#box', data:{ boxshow:false }, methods:{ togglebox:function(){ this.boxshow = !this.boxshow; } } }); </script></body></html>以上這篇vue動畫之點擊按鈕往上漸漸顯示出來的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
