主页 / 问题 / 795445
Accepted
Виталик Черный
Asked:2020-03-09 03:59:41 +0000 UTC2020-03-09 03:59:41 +0000 UTC

如何在css动画结束时获得回调？

  • 772

单击一个元素first会添加一个样式animation = "move 5s";。如何callback在css动画结束时重置样式？您可以以具有样式的类的形式抛出修饰符，或者通过属性然后重置它，但是如何获取它callback？

PS：为了清楚起见，我通过setTimeout.

function getId(id) {
	return document.getElementById(id);
}

function getStyle(elem) {
	return getComputedStyle(elem);
}

function setStyle(elem) {
	return elem.style;
}

let firstElem = getId("first");

firstElem.addEventListener('click', function() {
	setStyle(firstElem).animation = "move 5s";
	setTimeout(function() {
		setStyle(firstElem).animation = "none";
	}, 5000);
});
body {
	background: #3B3738;
	padding: 10px;
}

.elem {
	position: relative;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	text-transform: uppercase;
	padding: 20px;
	background: #512;
	width: 150px;
	box-shadow: inset 0 0 0 1px #000;
	//animation: move 5s;
	left: 0;
	margin-bottom: 10px;
	&:not(:last-child) {
		margin-bottom: 10px;
	}
}

@keyframes move {
	50% {
		left: 100%;
		transform: translateX(-100%);
	}
}
<div class="elem" id="first">First</div>

javascript

2 个回答

  1. Best Answer

    动画完成后会触发两个事件，您可以绑定到它们。

    1) transitionend- 当 CSS 属性完成执行时触发transition

    2) animationend - 分别在 CSS 属性完成执行时触发animation。

    • 4

  2. 为了能够callback在函数完成后调用，可以使用requestAnimationFrame. 例如：

    function getId(id) {
	return document.getElementById(id);
}
let firstElem = getId("first");

firstElem.onclick = function() {
    animate(function(timePassed) {
        firstElem.style.left = timePassed / 5 + 'px';
    }, 2000);
};

// Рисует функция draw
// Продолжительность анимации duration
function animate(draw, duration) {
  var start = performance.now();

  requestAnimationFrame(function animate(time) {
    // определить, сколько прошло времени с начала анимации
    var timePassed = time - start;

      // возможно небольшое превышение времени, в этом случае зафиксировать конец
    if (timePassed > duration) timePassed = duration;

    // нарисовать состояние анимации в момент timePassed
    draw(timePassed);

    // если время анимации не закончилось - запланировать ещё кадр
    if (timePassed < duration) {
      requestAnimationFrame(animate);
    } else {
    //иначе показываем сообщение что анимация завершилась
    //или вызываем какой нибудь callback
      firstElem.style.left = 0
      alert('анимация завершена')
    }

  });
}
    body {
	background: #3B3738;
	padding: 10px;
}
.elem {
	position: relative;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	text-transform: uppercase;
	padding: 20px;
	background: #512;
	width: 150px;
	box-shadow: inset 0 0 0 1px #000;
	//animation: move 5s;
	left: 0;
	margin-bottom: 10px;
}
    <div class="elem" id="first">First</div>

    阅读更多关于 js 动画的教程，更多信息请点击这里和这里。

    • 2

相关问题