uniapp 开发小程序展开更多与收缩的动画效果_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>
			
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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)
	}
	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16