CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-animations
user9018937368
user9018937368

Reputation: 99

Delay on keyframe animation

I want to had a delay with a keyframe animation, but it doesn't work. It's a div with an opacity animation on a click button. The problem is that the opacity is 100% before the animation start.

$('button').click(function() {
  if ($(this).hasClass("clicked")) {
    $('div').removeClass('In');
    $('div').addClass('Out');
    $(this).text("Open ↓");
    $(this).removeClass("clicked");
  } else {
    $('div').addClass('In');
    $('div').removeClass('Out');
    $(this).text("Close ↑");
    $(this).addClass("clicked");
  }
});
body {
  text-align: center
}

div {
  display: inline-block;
  background: pink;
  height: 300px;
  width: 300px;
  opacity: 0;
}

button {
  font-size: 16px;
}

@keyframes In {
  0% {
    opacity: 0;
    height: 0
  }
  100% {
    opacity: 1;
    height: 300px
  }
}

@keyframes Out {
  0% {
    opacity: 1;
    height: 300px
  }
  100% {
    opacity: 0;
    height: 0
  }
}

.In {
  animation-duration: 800ms;
  animation-name: In;
  animation-delay: 0.3s;
  opacity: 1;
}

.Out {
  animation-duration: 800ms;
  animation-name: Out;
  animation-delay: 0.3s;
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div> </div>

Here's MY JSFIDDLE with a problem.

Upvotes: 2

Views: 77

Answers (1)

Temani Afif
Temani Afif

Reputation: 272901

Use transition instead of animation and you will also have an easier code:

$('button').click(function() {
  if ($(this).hasClass("clicked")) {
    $(this).text("Open ↓");
  } else {
    $(this).text("Close ↑");
  }
  $('div.box').toggleClass('In');
  $(this).toggleClass("clicked");
});
body {
  text-align: center
}

div.box {
  display: inline-block;
  background: pink;
  height: 0;
  width: 300px;
  opacity: 0;
  transition: .8s .3s;
}

button {
  font-size: 16px;
}

div.In {
  opacity: 1;
  height: 300px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div class="box"> </div>

Considering your code you may correct it like this:

$('button').click(function() {
  if ($(this).hasClass("clicked")) {
    $('div').removeClass('In');
    $('div').addClass('Out');
    $(this).text("Open ↓");
    $(this).removeClass("clicked");
  } else {
    $('div').addClass('In');
    $('div').removeClass('Out');
    $(this).text("Close ↑");
    $(this).addClass("clicked");
  }
});
body {
  text-align: center
}

div {
  display: inline-block;
  background: pink;
  height: 300px;
  width: 300px;
  opacity: 0;
}

button {
  font-size: 16px;
}

@keyframes In {
  0% {
    opacity: 0;
    height: 0
  }
  100% {
    opacity: 1;
    height: 300px
  }
}

@keyframes Out {
  0% {
    opacity: 1;
    height: 300px
  }
  100% {
    opacity: 0;
    height: 0
  }
}

.In {
  animation-duration: 800ms;
  animation-name: In;
  animation-delay: 0.3s;
  animation-fill-mode:forwards; /*Added this*/
  /* opacity:0; removed*/
}

.Out {
  animation-duration: 800ms;
  animation-name: Out;
  animation-delay: 0.3s;
  animation-fill-mode:forwards; /*Added this*/
  opacity:1;
  height:300px; /*Added this*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div> </div>

Upvotes: 2

Related Questions