开始动画完成后，CSS 过渡和动画消失

Question

你好，
我在 CSS 动画和过渡方面有问题。

 $(document).ready(function(){ $(".d1").click(function(e){ $(".d2").css("animation-direction", "reverse"); $(".d3").css("animation-direction", "reverse"); }); $(".d2").click(function(e){ $(".d1").css("animation-name", "none").css("opacity", 0); $(".d3").css("animation-name", "none").css("opacity", 0); }); $(".d3").click(function(e){ $(".d1").css("animation-name", "none").fadeOut("slow"); $(".d2").css("animation-name", "none").fadeOut("slow"); }); });

 @keyframes inseq { 100% { opacity: 1; } } .d1, .d2, .d3 { opacity: 0; transition: all 2s; animation: inseq 3s ease 1s forwards; } .d2 { animation-delay: 1.3s } .d3 { animation-delay: 1.6s }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div>

https://jsfiddle.net/v7mepwmg/2/

我在一系列元素上有一个开始淡入动画，然后使用 jquery click 事件触发淡出； 我已经尝试了 3 种方法（例如它们是 .d1 .d2 和 .d3 单击事件）来实现这一点，但是在动画完成时，它们都不能这样做.....

PS如果动画还没有完成，他们工作得很好......

我想念什么吗？ 谢谢！

Answer 1

更新了一点。

它与在 div 元素上设置的opacity=0和animation-direction:reverse的使用有关。 很难解释。 基本上它会在没有任何动画的情况下跳转到初始关键帧。 所以我为输出动画创建了另一组关键帧，而不是使用animation-direction:reverse 。

@keyframes in {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes out {
  from {opacity: 1;}
  to {opacity: 0;}
}
.d1,.d2,.d3 {
  opacity: 0;
  animation: in 3s ease 1s forwards 1;
}
.d2 {animation-delay: 1.3s}
.d3 {animation-delay: 1.6s}

然后使用它来添加第二个动画并更改初始不透明度。

$(document).ready(function() {
  $('div').click(function(e) {
    var selected = $(this).attr('class');
    $('div').not("." + selected).css({
      'opacity': '1',
      'animation' : 'out 3s ease forwards 1'
    }).delay('3000').fadeOut('0');
  });
});

这是更新的小提琴。

https://jsfiddle.net/thelessergeek/0pwan8qm/