Question

我有object1和object2。

object1有一个delay: 0s

的动画

object2有一个delay: 0.5s

的动画

当您点击 1。时，两个对象都会正确分配.animation，但{0.5}之后会object2，这就是我想要的，一切都很顺利。

但问题是，当你点击 2。时，对象分配.animation-back，object1正确地做了他的事情，但是object2消失了0.5秒后，他做了一个动画。

我可能知道，这是因为同时删除了课程.animation，并且正在等待＆＃34;播放＆＃34; .animation-back，但是当我删除.removeClass('animation-back')等等时，它会跳转到某种循环或我怎么称呼它，你可以亲自尝试。

＆＃13;

$(".text1").click(function(){
  $(".object1").addClass('animation').removeClass('animation-back');
  $(".object2").addClass('animation').removeClass('animation-back');
});
$(".text2").click(function(){
  $(".object1").addClass('animation-back').removeClass('animation');
  $(".object2").addClass('animation-back').removeClass('animation');
});

＆＃13;

a{
  font-size:150%;
}
.text1{
  cursor:pointer;
  margin-left:42px;
  font-size:150%;
}
.text2{
  cursor:pointer;
  margin-left:42px;
  font-size:150%;
}
.object1{
  width: 100px;
  height: 100px;
  background: red;
  margin:2em;
  margin-left: 150px;
  position: relative;
  opacity: 0;
}
.object1.animation{
  animation: animation1 0.7s ease-in-out 0s 1 forwards;
}
.object1.animation-back{
  animation: animation2 0.7s ease-in-out 0s 1 forwards;
}
.object2{
  width: 100px;
  height: 100px;
  background: red;
  margin:2em;
  margin-left: 150px;
  position: relative;
  opacity: 0;
}
.object2.animation{
  animation: animation1 0.7s ease-in-out 0.5s 1 forwards;
}
.object2.animation-back{
  animation: animation2 0.7s ease-in-out 0.5s 1 forwards;
}

@keyframes animation1 {
  from { margin-left: 150px; opacity: 0; }
  to { margin-left: 0px; opacity: 1; }
}
@keyframes animation2 {
  from { margin-left: 0px; opacity: 1; }
  to { margin-left: 150px; opacity: 0; }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text1"><a>1.</a></div>
<div class="text2"><a>2.</a></div>
<div class="object1"></div>
<div class="object2"></div>

＆＃13;

感谢您的建议，祝您有个愉快的一天！

Answer 1

问题是你的默认类正在使框的不透明度为0而你的动画正在延迟.5s所以它在不透明度回到1之前需要半秒钟。只需更新对象2类以包含对象的默认状态

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

Answer 2

您将animation-fill-mode设置为forwards，这只会维持最终动画状态（完成后）。如果要在应用于元素后立即显示初始状态，请将animation-fill-mode设置为backwards（both为forwards }和backwards。

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

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

作为旁注，您可能会发现仅使用一个关键帧集并将animation-direction设置为reverse来反转动画是值得的。

.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;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

JS onclick div消失，直到播放动画

2 个答案: