Ein sich drehendes Rad bei einem bestimmten Winkelgrad stoppen? ⇐ CSS

[Guest]

Ich kann ein sich drehendes Rad nicht dazu bringen, bei einem bestimmten Sektorindex anzuhalten.
Sobald ein Zufallsindex erstellt wurde, sollte er seinen Startgrad ermitteln und den Min-Max-Bereich berechnen Rad stoppt irgendwo dazwischen in diesem Sektor.
Kann mir jemand sagen, was ich hier übersehe, weil es nicht wie erwartet funktioniert?
WheelSpin-Komponenten-DEMO: https://playcode.io/2211878:
Der Teil, von dem ich spreche, ist eine Methode spin():

Code: Select all

function spin() {
if (isSpinning.value) return;

isSpinning.value = true;

const targetIndex = getRandomSectorIndex();

const extraSpins = Math.floor(4 + Math.random() * 4);

const angle = 360 / sectors.value.length;

const randomMinMax = (m: number, M: number) => Math.random() * (M - m) + m;

// Target sector angle
const min = targetIndex * angle;
const max = min + angle;
const targetRotation = randomMinMax(min, max);

const rotateTo = currentRotation.value + 360 * extraSpins + targetRotation;

console.log(`Should be: ${sectors.value[targetIndex].code} at index ${targetIndex} of ${targetRotation}deg`);
console.log('rotate to:', rotateTo);
isSpinning.value = false;

if (wheel.value) {
wheel.value.style.transition = 'transform 5s cubic-bezier(0.3, 0, 0.1, 1)';
wheel.value.style.transform = `rotate(${rotateTo}deg)`;
}
currentRotation.value = rotateTo;

setTimeout(() => {
isSpinning.value = false;

// Calculate stopped sector
const normalizedRotation = currentRotation.value % 360;
const sectorIndex = Math.floor(normalizedRotation / 30) % sectors.value.length;
// Reverse index because rotation is clockwise
const reversedIndex = sectors.value.length - 1 - sectorIndex;
done(reversedIndex);
}, 5000);
}

Ich habe versucht, mit dem CSS-Ansatz zu drehen, bin mir aber nicht sicher, ob das eine gute Idee ist.
Ich habe auch keine Ahnung, wie ich das Rad in einem bestimmten Sektor anhalten kann.