日常笔记二(对数据进行一些简单的操作,css3下滑动画)

1. 对请求的数据加一个属性及属性值

getQuestions().then(res => {
			const data = res.data;
			let keyId = this.questionsList[key];
			data.forEach(qs => {
				this.$set(qs, 'leave', false);//方法一
				// qs['leave'] = false;//方法二
				//又或者对v-for的唯一Key改变
				//this.$set(keyId, 'leave', true);
				// this.questionsList[key]['leave'] = true;
			});
			this.questionsList = data;
		});

2. css3动画,下滑,并慢慢消失

css板块

main-content {
	width: 688upx;
	height: 1082upx;
	margin: 110upx auto 0;
	padding: 74upx 42upx 43upx 42upx;
	background: #ffffff;
	&.leave {
		// top: 150%!important;
		/*  #ifdef MP  */
		// display: none;
		visibility:hidden;
		/*  #endif  */
		/*  #ifdef H5  */
		animation: upDown_anim 0.5s linear forwards;
		/*  #endif  */
	}
}
@keyframes upDown_anim {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		transform: translateY(100%);
		opacity: 0;
	}
}

html板块

<view
					class="main-content"
					v-for="(qs, k) in questionsList"
					:key="k+'1'"
					:class="{ leave: qs.leave }"
					:style="{
						'z-index': (questionsList.length - k) * 1,
						position: 'absolute',
						top: 0,
						left: '30rpx',
					}"
				>
					<view class="questions-item">
						<text class="title">{{ k + 1 }}.{{ qs.desc }}</text>
						<view
							v-for="(answer, score) in answerList"
							class="answer"
							:key="score+'2'"
							:class="{ selected: qs.result === score + 1 }"
							@click="handleChoose(k, score)"
						>
							<text>{{ fromCharCode(score, answer) }}</text>
						</view>
					</view>
					<view class="questions-nav">
						<view class="nav-num">
							<text class="current">{{ k + 1 }}</text>
							<text>/</text>
							<text class="all">{{ questionsList.length }}</text>
						</view>
						<button class="prev-btn" v-if="k >= 1 && k < questionsList.length - 1" @click="handlePrev(k)">
							上一题
						</button>
						<!-- #ifdef MP -->
						<button
							class="submit-btn"
							:disabled="submit"
							v-if="k >= questionsList.length - 1"
							@click="handleClaimReport"
						>
							&#165; {{ price }}领取报告
						</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<button
							class="submit-btn"
							:class="['submit-btn', { disabled: submit }]"
							:disabled="submit"
							v-if="k >= questionsList.length - 1"
							@click="handleClaimReport"
						>
							&#165; {{ price }} 领取报告
						</button>
						<!-- #endif -->
					</view>
				</view>

效果图