极客观点
项目管理
HarmonyOS
通过点击对box添加2次动画。
第一个动画完成后，再点击添加第二个动画。此时box会回到初始状态再进行第二个动画。
animation-fill-mode已经设置为forwards了，但还是会回到初始状态后再执行第二个动画。
怎样才能解决回到初始状态的问题？
以下是代码，有使用jQuery。用jQuery的animate函数可以解决问题，但是我想知道用JavaScript为什么回到初始状态再执行动画。
## HTML ##
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animeation</title>
<link rel="stylesheet" href="main.css" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="anime.js"></script>
</head>
<body>
<div class="box"></div>
<button type="button" name="button" id="btn">Click</button>
</body>
</html>
********************************************************************************
## CSS ##
body{
margin: 0 auto;
padding: 0;
}
.box{
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, 0.5);
}
#btn{
position: absolute;
top: 110px;
left: 20px;
}
.ltr1{
animation-name: ltr1;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
.ltr2{
animation-name: ltr2;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
/* Animation */
@keyframes ltr1 {
0% {left: 0px}
100% {left: 100px}
}
@keyframes ltr2 {
0% {left: 100px}
100% {left: 200px}
}
********************************************************************************
## Javascript ##
$(document).ready(function(){
var btn = $('#btn')
var time = 0
var ad = ['ltr1','ltr2']
$('#btn').click(function(){
$('.box').addClass(ad[time])
time += 1
})
})
html5
forward保持了最后一个keyframe的样式，而你第二次操作的是同个元素，所以原来的keyframe失效了。这种情况可以用“FLIP”方法解决。简单说就是先计算出动画完成后的位置，将元素定位移到那，同时通过
transform抵消掉，此时元素看起来还在原来的位置，然后倒过来实现transform将元素移过去。动画完成后transform归零，元素也在新位置了。修改了一下你的代码供参考
https://jsfiddle.net/straybug...