溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
之前用jquery實現(xiàn)還很簡單，然后用vue就一直不行，然后在網(wǎng)上找了很多，又仔細看了vue官網(wǎng) 的過渡&動畫，發(fā)現(xiàn)其實很簡單 (可以多看vue官網(wǎng) 過渡&動畫 實現(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">點擊展開/關(guān)閉</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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼