html
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 230px;
height: 130px;
background-color: #D8B7B2;
border: 1px solid #840705;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 5px;
}
.box.ani {
animation: backOutRight 2s;
}
.box.ani2 {
animation: backOutRight2 2s;
}
@-webkit-keyframes backOutRight {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
}
100% {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@-webkit-keyframes backOutRight2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
</style>
</head>
<body>
<div id='box' class='box'></div>
</body>
<script>
let dom = document.getElementById('box')
let timer = null;
let currentIndex = 0;
let aniList = [
{
num:2, //单个动画执行次数
time:1000, //单个动画执行时间
name: 'ani', //动画名称
},
{
num:1,
time:2000,
name: 'ani2'
},
{
num:1,
time:2000,
name: 'ani'
},
{
num:2,
time:1000,
name: 'ani2'
},
]
startAni()
function startAni() {
// 初始化dom节点的class
let classList = ['box']
dom.setAttribute('class', classList.join(' '))
// 如果当前播放的动画已经是最后一个,阻止后续代码执行
if(!aniList[currentIndex]) {
return
};
// 获取当前需要播放的动画
let item = aniList[currentIndex];
// 设置当前动画执行时间
dom.style.animationDuration = item.time / 1000 +'s';
// 将动画的下标加1
currentIndex++;
// 默认执行一次
aniGo(item)
// 根据动画执行时间设置计时器
timer = setInterval(() => {
aniGo(item)
},item.time)
function aniGo(item) {
if(item.num == 0) {
clearInterval(timer)
startAni()
return;
}
classList = ['box']
dom.setAttribute('class', classList.join(' '))
let timer3 = setTimeout(() => {
classList = ['box',item.name]
dom.setAttribute('class', classList.join(' '))
item.num--;
clearTimeout(timer3)
},20)
}
}
</script>
</html>