Javascript 在播放动画之前，JS onclick div将消失

我有一个

object1

和

object2

object1

有一个带有

延迟的动画：0s

object2

有一个延迟为0.5s的动画

当您单击1.时，两个对象都正确地分配了

.animation

，但是

object2

在0.5s后，这就是我想要的，一切都会正常进行

但问题是，当您单击2.时，对象分配

。动画返回

，

object1

正确执行其操作，但

object2

在0.5s后消失，然后他执行动画

.object2.animation {
    animation: animation1 0.7s ease-in-out 0.5s 1 both;
}
.object2.animation-back {
    animation: animation1 0.7s ease-in-out 0.5s 1 reverse both;
}

我可能知道，这是因为也删除了类

.animation

，它正在等待“play”

.animation back

，但当我删除

.removeClass（'animation-back'）

，等等时，它将跳入某种循环，或者我如何调用它，您可以自己尝试

$（“.text1”）。单击（函数（）{
$（“.object1”）.addClass（'animation'）.removeClass（'animation-back'）；
$（“.object2”）.addClass（'animation'）.removeClass（'animation-back'）；
});
$（“.text2”）。单击（函数（）{
$（“.object1”）.addClass（'animation-back'）.removeClass（'animation'）；
$（“.object2”）.addClass（'animation-back'）.removeClass（'animation'）；
});
a{
字体大小：150%；
}
.text1{
光标：指针；
左边距：42px；
字体大小：150%；
}
.text2{
光标：指针；
左边距：42px；
字体大小：150%；
}
.1反对意见1{
宽度：100px；
高度：100px；
背景：红色；
边缘：2米；
左边距：150像素；
位置：相对位置；
不透明度：0；
}
.1.1动画{
动画：动画1 0.7秒缓进缓出0秒1向前；
}
.object1.1动画返回{
动画：动画2 0.7秒缓进缓出0秒1向前；
}
.反对意见2{
宽度：100px；
高度：100px；
背景：红色；
边缘：2米；
左边距：150像素；
位置：相对位置；
不透明度：0；
}
.2.2动画{
动画：动画1 0.7秒缓进缓出0.5秒向前；
}
.object2.1动画-返回{
动画：动画2 0.7秒缓进缓出0.5秒向前；
}
@关键帧动画1{
从{左边距：150px；不透明度：0；}
至{左边距：0px；不透明度：1；}
}
@关键帧动画2{
从{左边距：0px；不透明度：1；}
至{左边距：150px；不透明度：0；}
}

1.
2.
问题是默认类将长方体不透明度设置为0，而动画延迟了0.5s，因此需要半秒的时间才能将不透明度恢复为1。只需更新Object2类以包含对象的默认状态

.object2.animation-back {
    opacity: 1;
    margin-left: 0px;
    animation: animation2 0.7s ease-in-out 0.5s 1 forwards;
}

将
动画填充模式
设置为
向前
，这将仅保持最终动画状态（完成后）。如果要在将初始状态应用于元素后立即显示初始状态，请将
动画填充模式设置为
向后
（或
向前
和
向后

.object2.animation-back {
    animation: animation2 0.7s ease-in-out 0.5s 1 both;
}



作为旁注，您可能会发现只使用一组关键帧是值得的，并将
动画方向
设置为
反转
以反转动画

.object2.animation {
    animation: animation1 0.7s ease-in-out 0.5s 1 both;
}
.object2.animation-back {
    animation: animation1 0.7s ease-in-out 0.5s 1 reverse both;
}

请在您的问题中直接显示相关代码。不确定预期结果是什么？@guest271314预期结果是第二个框在右侧动画显示之前不会消失。@MikeC，是的，谢谢：）给您，我的救世主，非常感谢！祝你今天愉快！：）