CODEWITHSUNDEEP
javascriptjqueryhtmlcss
anthony
anthony

Reputation: 23

CSS Transition and animation disappear after the starting animation finished

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!

Upvotes: 2

Views: 3736

Answers (1)

AA2992
AA2992

Reputation: 1607

Updated this a little.

It has something to do with the opacity=0 set on the div elements and the use of animation-direction:reverse. Tough to explain. Basically it jumps to the initial key-frame without any animation. So I've created another set of keyframes for out animation instead of using 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}

And then used this to add the second animation and change the initial opacity.

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

Here's the updated Fiddle.

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

Upvotes: 2

Related Questions