使用requestAnimationFrame在循环期间更改过渡持续时间

Question

我正在尝试更改setTimeout循环的步骤之间的过渡持续时间。

当单击按钮 centre 时，setView更改content的位置，以便inner div保持在屏幕中央。它使用forEach循环使用inner div数组更改居中。

我希望在从 alpha内部到 bravo内部的转换之间采用1s，但是一旦到达那里，转换应该是{ {1}}，这样就不会落后于中心定位。

Here's a codepen, then built in is getting an error.

我正在使用香草ES6。

0s

const content = document.querySelector('.content');
let frame;

function getBounds(div) {
	const element = document.getElementById(div);
	const body = element.children[0];
	const {
		x, y, width, height,
	} = body.getBoundingClientRect();
	return box = {
		element, body, x: Math.round(x), y: Math.round(y), width, height,
	};

}

function setView(div) {
	const centerW = window.innerWidth / 2;
	const centerH = window.innerHeight / 2;
	const { left, top } = content.getBoundingClientRect();
	content.style.left = `${(centerW + left) - (div.x + div.width / 2)}px`;
	content.style.top = `${(centerH + top) - (div.y + div.height / 2)}px`;
}

function centreDiv(string) {
	const outers = string.split(' ');
	
	outers.forEach(function(outer, index) {
		setTimeout(function() {
			content.style.transition = 'all 0s linear'; // this works

			if (frame) {
				cancelAnimationFrame(frame);
			}

			function tick(now) {
				setView(getBounds(outer));
				frame = requestAnimationFrame((timestamp) => tick(timestamp, outer));
			}

			frame = requestAnimationFrame((timestamp) => tick(timestamp, outer));
		},
		5000 * index);

		content.style.transition = 'all 1s linear'; // this isn't working
	});

}

document.getElementById('centre').onclick = () => centreDiv(centreText.value.toLowerCase());

* {box-sizing: border-box;}
html,body,div,span {padding: 0;	margin: 0; border: 0;}
.controls {
	position: absolute;
	z-index: 1000;
	padding-top: 10px;
	padding-left: 20px;
	font-family: sans-serif;
	color: white;
}

.content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height:100vh;
	background-color: rgb(138,141,143);
	transition: all 0s linear;
}

.centre {
	position: absolute;
	display: block;
	width: 5px;
	height: 5px;
	background-color: white;
}

.outer {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.inner {
	display: block;
	width: 30px;
	height: 30px;
	background-color: rgb(37,40,42);
}

.animate {
	animation: spin infinite linear;
}

#alpha {
	width: 80%;
	height: 80%;
	background-color: rgb(255,205,0);
	animation-duration: 10s;
}

#bravo {
	width: 30%;
	height: 30%;
	background-color: rgb(242,169,0);
	animation-duration: 5s;
}

@keyframes spin {
	100% {
		transform: rotateZ(360deg);
	}
}