<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>
各个官网常见的元素出现动画
最新推荐文章于 2024-07-17 15:26:15 发布