Состояние воспроизведения анимации webkit: как запустить / остановить анимацию по требованию с помощью javascript

Question

Состояние воспроизведения анимации webkit: как запустить / остановить анимацию по требованию с помощью javascript

0

Я работаю над игрой и только что узнал об атрибуте CSS -webkit-анимация-play-state. Я хочу, чтобы определенный текст показывался как короткая анимация, затем скрывался и показывался при повторном вызове (в javascript).

Я понял, как начать анимацию, когда я хочу в javascript, но после ее завершения текст остается на экране, чего я не хочу.

HTML:

<p id="INFO">
    TEST
</p>

CSS:

@-webkit-keyframes pulse {
   from {
     opacity: 0.0;
     font-size: 100%;
   }
   to {
     opacity: 1.0;
     font-size: 400%;
   }
}

#INFO {
  position: absolute;
  left: 400px;
  top: 200px;
 -webkit-animation-name: pulse;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-play-state:paused;
  visibility: hidden;
}

JS:

var INFO = document.getElementById("INFO");
INFO.innerHTML = "WRONG";
INFO.style.color = "RED";
INFO.style.webkitAnimationPlayState = "running";
INFO.style.visibility = "visible";

Я прочитал несколько вопросов/ответов о состоянии -webkit-animation-play-state на этом сайте, но ни один из них не касается вопроса, который у меня есть. Одна вещь, о которой я читал, это то, что анимация переходит к значениям по умолчанию, когда она заканчивается. Но мои значения по умолчанию говорят, что анимация "скрыта"? source: как остановить анимацию фрейма webkit?

Если кто-то может указать мне в правильном направлении, я был бы благодарен. Если бы я был недостаточно ясен, спросите, пожалуйста, дополнительную информацию.

спасибо

trainoasis 05 янв. 2014, в 12:47

Источник

Теги:

javascript

html

css

animation

1 ответ

Ещё вопросы

vivekvasani · Accepted Answer · 2014-01-05T08-57-00.000Z

Для того, что вы пытаетесь сделать, вам не нужно использовать -webkit-animation-play-state.

Вместо этого попробуйте запустить анимацию, применив класс с установленными свойствами анимации. Затем используйте прослушиватель событий JavaScript, чтобы удалить класс после завершения анимации.

Вы также должны сохранить элемент скрытым с opacity а не visibility:hidden поскольку вы манипулируете opacity в анимации.

CSS:

@-webkit-keyframes pulse {
   from {
     opacity: 0.0;
     font-size: 100%;
   }
   to {
     opacity: 1.0;
     font-size: 400%;
   }
}

#INFO {
  opacity:0;
  position: absolute;
  left: 400px;
  top: 200px;
}

.pulse {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
}

JS:

var INFO = document.getElementById("INFO");
INFO.innerHTML = "WRONG";
INFO.style.color = "RED";

INFO.addEventListener('webkitAnimationEnd', function (e) {
  this.classList.remove('pulse');
});

DEMO >> CodePen

эта демо, к сожалению, ничего не делает для меня, что может пойти не так?
Это сработало для меня в моем окружении, спасибо :) Хотя в демо-примере это не сработало :)