我遇到过这个问题，但不理解这种行为。
这里我们有一个简单的矩形，按下切换按钮时应该以动画形式进出。
单击按钮时，矩形类名称将在“animation-in”和“animation-out”之间切换。
“scale-easeInOutBounce”和“scale-easeInOutBounce-out”的关键帧对象是相同的，只是两者之间的名称引用不同。
一切都很完美。
当 css 规则“.animation-out”中的属性“animation-name:”从“scale-easeInOutBounce-out”更改为“scale-easeInOutBounce”时，动画会中断。
这里的问题是，为什么会出现这种情况？是代码有逻辑错误，还是动画实现不正确？
很想了解这种行为。
在 Windows 11 上使用“Chrome”复制了此行为
<!DOCTYPE html>
<html>
<head>
<title>Rectangle Animation</title>
<style>
#myRectangle {
width: 100px;
height: 150px;
background-color: green;
margin: 20px;
transform: scale(0);
}
.animation-out {
animation-duration: 4s;
animation-timing-function: ease; /*linear*/
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
animation-name: scale-easeInOutBounce;
animation-timeline: auto;
animation-range-start: normal;
animation-range-end: normal;
}
.animation-in {
animation-duration: 4s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: reverse;
animation-fill-mode: forwards;
animation-play-state: running;
animation-name: scale-easeInOutBounce;
animation-timeline: auto;
animation-range-start: normal;
animation-range-end: normal;
}
@keyframes scale-easeInOutBounce {
0% { transform: scale(1); }
2% { transform: scale(0.99); }
4% { transform: scale(1); }
10% { transform: scale(0.97); }
14% { transform: scale(0.99); }
22% { transform: scale(0.88); }
32% { transform: scale(0.99); }
42% { transform: scale(0.6); }
50% { transform: scale(0.5); }
58% { transform: scale(0.4); }
68% { transform: scale(0.01); }
78% { transform: scale(0.12); }
86% { transform: scale(0.01); }
90% { transform: scale(0.03); }
96% { transform: scale(0); }
98% { transform: scale(0.01); }
100% { transform: scale(0); }
}
@keyframes scale-easeInOutBounce-out {
0% { transform: scale(1); }
2% { transform: scale(0.99); }
4% { transform: scale(1); }
10% { transform: scale(0.97); }
14% { transform: scale(0.99); }
22% { transform: scale(0.88); }
32% { transform: scale(0.99); }
42% { transform: scale(0.6); }
50% { transform: scale(0.5); }
58% { transform: scale(0.4); }
68% { transform: scale(0.01); }
78% { transform: scale(0.12); }
86% { transform: scale(0.01); }
90% { transform: scale(0.03); }
96% { transform: scale(0); }
98% { transform: scale(0.01); }
100% { transform: scale(0); }
}
</style>
</head>
<body>
<div id="myRectangle"></div>
<button id="toggleButton">Toggle Animation</button>
<script>
document.getElementById('toggleButton').addEventListener('click', function() {
var rectangle = document.getElementById('myRectangle');
if (rectangle.classList.contains('animation-in')) {
rectangle.classList.remove('animation-in');
rectangle.classList.add('animation-out');
} else {
rectangle.classList.remove('animation-out');
rectangle.classList.add('animation-in');
}
});
</script>
</body>
</html>
我认为你的问题是动画的流畅度。我在这里做了一些 CSS 更改，也许你的问题会得到解决。
document.getElementById('toggleButton').addEventListener('click', function() {
var rectangle = document.getElementById('myRectangle');
if (rectangle.classList.contains('animation-in')) {
rectangle.classList.remove('animation-in');
rectangle.classList.add('animation-out');
} else {
rectangle.classList.remove('animation-out');
rectangle.classList.add('animation-in');
}
});#myRectangle{
width:100px;
height:150px;
background-color:green;
margin:20px;
transform:scale(0);
}
.animation-out, .animation-in{
animation-duration:1s;
animation-timing-function:ease;
animation-delay:0s;
animation-iteration-count:1;
animation-fill-mode:forwards;
animation-play-state:running;
}
.animation-out{
animation-direction:normal;
animation-name:scale-easeInOutBounce-out;
}
.animation-in{
animation-direction:reverse;
animation-name:scale-easeInOutBounce;
}
@keyframes scale-easeInOutBounce{
0%{transform:scale(1);}
100%{transform:scale(0);}
}
@keyframes scale-easeInOutBounce-out {
0% { transform: scale(1); }
100% { transform: scale(0); }
}<div id="myRectangle"></div>
<button id="toggleButton">Toggle Animation</button>