uniapp开发小程序展开更多与收缩的动画效果

效果图&＃xff1a;

html

<view> <view >公告</view><view &＃64;click&＃61;"showMore"> {{isShow ? &＃39;收起∧&＃39;:&＃39;查看更多∨&＃39;}} </view>
</view><!-- 更多弹框 -->
<view ><view class&＃61;"show-more" :class&＃61;"[isShow ? &＃39;show-more-click&＃39; : &＃39;&＃39;]"><view v-if&＃61;"isShowText">第1行文字</view><view v-if&＃61;"isShowText">第2行文字</view><view v-if&＃61;"isShowText">第3行文字</view><view v-if&＃61;"isShowText">第4行文字</view><view v-if&＃61;"isShowText">第5行文字</view><view v-if&＃61;"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 &＃61; !this.isShowthis.isClick &＃61; !this.isClick// 先展开500毫秒后再显示文字,收缩200毫秒后再隐藏文字if(this.isShowText){setTimeout(()&＃61;>{this.isShowText &＃61; !this.isShowText},200)}else{setTimeout(()&＃61;>{this.isShowText &＃61; !this.isShowText},500)}}