Heim >Web-Frontend >CSS-Tutorial >Eine kurze Diskussion über die Rückrufverarbeitungsmethode der CSS3-Animation
Eine kurze Diskussion über die Rückrufverarbeitungsmethode der CSS3-Animation
- 高洛峰Original
- 2017-03-07 11:59:371282Durchsuche
Wenn wir eine JS-Animation erstellen, müssen wir häufig eine Rückrufverarbeitung durchführen, z. B. das Auslösen eines Ereignisses nach Abschluss einer Animation, das Ausführen einer anderen Animation nach Abschluss einer Animation usw., aber kann dies bei Verwendung einer CSS3-Animation erfasst werden? Was ist mit der Rückrufverarbeitung für den Bewegungsstatus?
CSS3-Animationen können auch mit Rückrufen verarbeitet werden. Sie sind in zwei Attribute unterteilt, eines ist Übergang [w3c-Dokument] und das andere ist Animation [w3c-Dokument].
1. Übergang
Für den Übergang können Sie sich das Übergangsereignis anhören, das ausgelöst wird, wenn die Animation abgeschlossen ist es so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-transitionend - BeyondWeb</title>
<style>
* {margin: 0; padding: 0;}
.rect {
width: 100px;
height: 100px;
background-color: #f80;
-webkit-transition: all .5s;
}
</style>
<script>
window.onload = function () {
var _rect = document.querySelector('.rect');
_rect.onclick = function () {
_rect.style.webkitTransform = 'translateX(300px)';
}
_rect.addEventListener('webkitTransitionEnd', function () {
alert('动画执行完毕！');
// callback here
}, false);
}
</script>
</head>
<body>
<p class="rect"></p>
</body>
</html>
2. Animation
Für Animationen können wir uns das Animationend-Event anhören. Der Beispielcode lautet wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-animationend - BeyondWeb</title>
<style>
* {margin: 0; padding: 0;}
.rect {
position: relative;
width: 100px;
height: 100px;
background-color: #f80;
}
@-webkit-keyframes move {
from {
-webkit-transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
}
}
</style>
<script>
window.onload = function () {
var _rect = document.querySelector('.rect');
_rect.onclick = function () {
_rect.style.webkitAnimation = 'move 3s';
}
_rect.addEventListener('webkitAnimationEnd', function () {
alert('动画执行完毕！');
// callback here
}, false);
}
</script>
</head>
<body>
<p class="rect"></p>
</body>
</html>
handelt von der Verarbeitung von CSS3-Animationsrückrufen. Er wurde kürzlich bei der Erstellung von H5-Seiten verwendet.
Der obige Artikel, in dem die Rückrufverarbeitung von CSS3-Animationen kurz erläutert wird, ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und hoffe, dass Sie die chinesische PHP-Website unterstützen.
Weitere verwandte Artikel zur Rückrufverarbeitungsmethode der CSS3-Animation finden Sie auf der chinesischen PHP-Website!