CSS Transition and animation disappear after the starting animation finished

Refresh

December 2018

Views

922 time

2

Hi,
I have a problem on CSS animation and transition.

$(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/

I have a starting-fade-in animation on a series of elements, and then using jquery click event to trigger fadeout; I have tried 3 methods (in example they are .d1 .d2 and .d3 click event) to achieve so, but none of them can do so while the animation finished.....

P.S. If the animation has not finished yet, they work well...

Do I miss anything ?? Thanks!

1 answers

1

Обновлено это немного.

Это что - то делать с opacity=0набором на элементы DIV и использования 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/