javascript - 开始动画完成后，CSS Transition 和动画消失

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 单击事件)来实现这一点，但是当动画完成时它们都不能这样做......

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

我想念什么吗？谢谢!

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');
  });
});

这是更新后的 Fiddle。

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