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

效果图：

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)
	}
	
}