Задержка анимации ключевых кадров - PullRequest
Новая
       2

Задержка анимации ключевых кадров

0 голосов
/ 05 октября 2018

Я хочу задержать анимацию ключевого кадра, но она не работает.Это div с анимацией непрозрачности на кнопке.Проблема в том, что перед запуском анимации непрозрачность составляет 100%. 

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

Вот МОЙ JSFIDDLE с проблемой.

1 Ответ

0 голосов
/ 05 октября 2018

Используйте переход вместо анимации, и у вас также будет более простой код: 

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

Учитывая ваш код, вы можете исправить его следующим образом: 

$('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>
...