animationiteration 这个应该也是在掘金某篇文章看到的，这里仅做本地记录，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html,
body {
margin: 0;
height: 100%;
display: grid;
place-content: center;
}
.view {
position: relative;
width: 400px;
height: 250px;
counter-reset: num 0;
animation: scroll 3s infinite;
overflow: hidden;
}
.view:hover {
animation-play-state: paused;
cursor: pointer;
}
@keyframes scroll {
to {
/* transform: translateZ(0.1px); */
}
}
.inner {
display: flex;
height: 100%;
transform: translateX(calc(-100% * var(--index, 0)));
transition: 0.3s;
}
.item {
width: 100%;
height: 100%;
flex-shrink: 0;
display: grid;
place-content: center;
counter-increment: num;
/* background-color: blueviolet; */
color: #fff;
/* transition: 1s; */
/* transform: translate3d(0, 0, -100px); */
/* opacity: 0; */
}
.item::after {
content: counter(num);
font-size: 60px;
}
.item:nth-child(2n + 1) {
background: tomato;
}
.item:nth-child(3n + 2) {
background: royalblue;
}
.item:nth-child(5n + 3) {
background: violet;
}
.item:nth-child(7n + 4) {
background: tan;
color: #333;
}
.item:nth-child(11n + 5) {
background: yellowgreen;
}
</style>
<body>
<div class="view" id="view">
<div class="inner" id="inner">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
<script>
console.log('view', view)
view.addEventListener("animationiteration", () => {
const index = getComputedStyle(view).getPropertyValue("--index") || 0;
const len = view.querySelectorAll(".item").length;
if (index == len - 1) {
view.style.setProperty("--index", 0);
} else {
view.style.setProperty("--index", Number(index) + 1);
}
});
</script>
</html>
counter使用：
- counter-reset: 创建一个计数器;
- counter-increment: 增加或减少计数器的值;
- counter(): 展示计数器的值. 通常搭配在伪类元素中搭配 `content` 属性使用.
