vue動畫之點選按鈕往上漸漸顯示出來的例項(類似與摺疊面板)
阿新 • • 發佈:2021-12-23
<!-- 首先將要過渡的元素用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>
<style>
.box{
height:500px;
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>