Vue中固定高的div做展开与收缩操作
HTML
<div class="downUp transition-dom" ref="box" @click="funAnimate"></div>
CSS
.downUp {
height: 36px;
}
.transition-dom {
transition: all .2s linear 0s;
}
javascript
data() {
return {
headerOpen:false
}
},
methods: {
// 商家详情的展开与显示
funAnimate() {
if (this.headerOpen) {
this.$refs.box.style.height = '36px'
} else {
this.$refs.box.style.height = '530px'
}
this.headerOpen = !this.headerOpen
}
}