各个官网常见的元素出现动画

 <template>
	<div class="doc">
		<!-- 尽量不要使用index做key，要用唯一id,这边是测试数据，因此用的索引-->
		<div class="list_div" v-for="item in 10" :key="item" ref="list">
			<p>{{ item.toString().padStart(5, "0") }}</p>
		</div>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [],
				loading: true,
			};
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {
			const tags = this.$refs["list"];
			// 主要代码，监听元素是否出现
			const doc = new IntersectionObserver((e) => {
				let time = 0;
				e.forEach((item) => {
					const { target, isIntersecting } = item;
					if (isIntersecting) {
						doc.unobserve(target);
						target.classList.add("show");
						target.style = `background-color:${this.choseRgb()};--time:${time}`;
						time += 0.3;
					}
				});
			});
			tags.forEach((item) => {
				doc.observe(item);
			});
		},
		methods: {
			//随机生成背景色
			choseRgb() {
				// Math.random是生成0-1之间的随机数 *256 的范围就变成0.xx-255.7
				// Math.floor 向下取整就变成 0-255
				let r = Math.floor(Math.random() * 256);
				let g = Math.floor(Math.random() * 256);
				let b = Math.floor(Math.random() * 256);
				// 拼接返回
				return `rgb(${r},${g},${b})`;
			},
		},
	};
</script>
<style scoped>
	.list_div {
		height: 300px;
		width: 600px;
		margin: 40px;
		transform: translateX(-200px);
		// time变量控制动画间隔速度
		--time: 0.1;
	}

	.show {
		// transition: transform 0.5s linear;
		transition: all 0.5s linear;
		transition-delay: calc(var(--time) * 1s);
		transform: translateX(0px);
	}
</style>