В эпоху CSS3 возможна анимация CSS3;
Традиционный JS может определить, заканчивается ли анимация через функции обратного вызова; Даже если технология CSS используется для генерации анимационных эффектов, JavaScript все еще может захватить конечное событие анимации или преобразования;
Стандартные события событий TransitionEnd Event и AnimationEnd, но в браузере Webkit вам все еще нужно использовать префикс Webkit, поэтому мы должны обнаружить события отдельно в соответствии с различными браузерами
Кода -копия выглядит следующим образом:
var transitions = {
«Переход»: «TransitionEnd»,
'Otransition': 'OtransitionEnd',
'Moztransition': 'TransitionEnd',
'Webkittransition': 'webkittransitionend'
}
Исходный код прикреплен ниже:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<Title> Suface JS определяет, заканчивается ли анимация CSS </title>
</head>
<тело>
<p> Как только анимация или преобразование завершены, функция обратного вызова будет запущена. Поддержка библиотеки большого класса больше не нужна. <br> </p>
<стиль типа = "text/css">
.образец {
Ширина: 200px;
Высота: 200px;
Граница: 1px твердый зеленый;
Фон: Lightgreen;
непрозрачность: 1;
маржинальный бат: 20px;
Переход-Профессионал: непрозрачность;
/*Переходная продолжительность: .5S;*/
Продолжительность перехода: 3S;
}
.sample.hide {
непрозрачность: 0;
}
</style>
<viv> CSS3 анимация слишком слишком скрыта (продолжительность перехода: 3S;) </div>
<p> <button onclick = "this.style.display = 'none'; startfade ();"> медленно исчезает, событие конечного обнаружения </button> </p>
<Скрипт>
(function () {
var e = document.getElementsbyclassname ('образец') [0];
Функция, которая ThranSitionEvent () {
var t;
var el = document.createElement ('FakeElement');
var transitions = {
«Переход»: «TransitionEnd»,
'Otransition': 'OtransitionEnd',
'Moztransition': 'TransitionEnd',
'Webkittransition': 'webkittransitionend'
}
для (t в переходах) {
if (el.style [t]! == undefined) {
возвращаемые переходы [t];
}
}
}
var transitionEvent = What ThransitionEvent ();
TransitionEvent && e.addeventListener (TransitionEvent, function () {
ALERT ('CSS3 Движение заканчивается! Я функция обратного вызова, никакая сторонняя библиотека классов не используется!');
});
startFade = function () {
e.classname+= 'Hide';
}
}) (); <br> </script>
</body>
</html>
Выше приведен метод, описанный в этой статье о JavaScript, чтобы оценить конец анимации CSS3. Я надеюсь, что всем понравится