效果图:
html
<view>
<view >公告</view>
<view @click="showMore"> {{isShow ? '收起∧':'查看更多∨'}} </view>
</view>
<!-- 更多弹框 -->
<view >
<view class="show-more" :class="[isShow ? 'show-more-click' : '']">
<view v-if="isShowText">第1行文字</view>
<view v-if="isShowText">第2行文字</view>
<view v-if="isShowText">第3行文字</view>
<view v-if="isShowText">第4行文字</view>
<view v-if="isShowText">第5行文字</view>
<view v-if="isShowText">第6行文字</view>
</view>
</view>
css
/* 点击更多的样式 */
.show-more{
width:100%;
height:2px;
background-color: #4CD964;
transition:height 1s;
-moz-transition:height 1s; /* Firefox 4 */
-webkit-transition:height 1s; /* Safari and Chrome */
-o-transition:height 1s; /* Opera */
}
.show-more-click{
height:300px;
}
js
showMore(){
this.isShow = !this.isShow
this.isClick = !this.isClick
// 先展开500毫秒后再显示文字,收缩200毫秒后再隐藏文字
if(this.isShowText){
setTimeout(()=>{
this.isShowText = !this.isShowText
},200)
}else{
setTimeout(()=>{
this.isShowText = !this.isShowText
},500)
}
}