我的代码如下
<!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>
<style>
div {
width: 100px; height: 100px;
background-color: red;
}
div.forward {
animation-name: demo;
animation-direction: normal;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
div.backward {
animation-name: demo;
animation-direction: reverse;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
@keyframes demo {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
</style>
</head>
<body>
<body>
<script>
function t(div) {
div.classList.remove("backward");
div.classList.remove("forward");
}
function forward(div) {
div.classList.add("forward");
}
function backward(div) {
div.classList.add("backward");
}
var b = true;
function f() {
var div = document.getElementsByTagName("div")[0];
t(div);
if (b) {
forward(div);
}
else {
backward(div);
}
b = !b;
}
</script>
<div onclick="f()"></div>
</body>
</body>
</html>目的是通过将动画方向从正常更改为反向，反之亦然来来回运行div元素。当我第一次点击div元素时，动画运行得很好，第二次和更进一步的动画只是立即来回运行，没有任何动画，但当我在chrome DevTool 中逐行运行代码时
这和我预期的一样有效，我不知道为什么：(
我建议您使用变换而不是动画。代码明显减少，做同样的工作可能会更好。
function t(div) {
div.classList.remove("backward");
div.classList.remove("forward");
}
function forward(div) {
div.classList.add("forward");
}
function backward(div) {
div.classList.add("backward");
}
var b = true;
function f() {
var div = document.getElementsByTagName("div")[0];
t(div);
if (b) {
forward(div);
} else {
backward(div);
}
b = !b;
}div {
width: 100px;
height: 100px;
background-color: red;
}
div.forward {
/* animation-name: demo;
animation-direction: normal;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;*/
transform:translateX(100px);
transition:all 1s ease;
}
div.backward {
/* animation-name: demo;
animation-direction: reverse;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;*/
transform:translateX(0px);
transition:all 1s ease;
}
/*@keyframes demo {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}*/<div onclick="f()"></div>在此之前检查第一个答案。
我们可以更多地清理这个代码：
在这里，我为.box提供一个额外的.forward类。我只是用CCD_ 3来切换它。
function f() {
var box = document.querySelector(".box")
box.classList.toggle("forward")
}.box {
width: 100px;
height: 100px;
background-color: red;
transform: translateX(0px);
transition: all 1s ease;
}
.box.forward {
transform: translateX(100px);
transition: all 1s ease;
}<div class="box" onclick="f()"></div>