Как остановить сброс анимации поворота CSS на 0 при использовании точек заданного угла? ⇐ CSS

[Anonymous]

У меня была идея дизайна меню, в которой использовался центральный курсор, указывающий на то, какой пункт меню выбран в данный момент. Я добился этого с помощью кода JavaScript, который принимает список фиксированных углов, представляющих кнопки, а затем вычисляет, следует ли вращать по часовой стрелке или против часовой стрелки, в зависимости от того, для достижения какого угла потребуется меньше градусов. Однако проблема, с которой я столкнулся, заключалась в том, что при переходе от этих двух углов (от 222° до 115° и наоборот) стрелка не выбирала самый быстрый маршрут и вращалась в противоположном направлении.
После этого В некоторых исследованиях я считаю, что на самом деле происходит то, что курсор сбрасывается на 0 °, так что он завершает круг, прежде чем затем пройти к выбранному углу от нулевой точки, что приводит к тому, что он движется в неправильном направлении. Я прочитал здесь несколько ответов и провел общее исследование функции поворота в целом, но не смог найти случай, достаточно похожий на мой, и не смог интуитивно понять способ, с помощью которого я мог бы это исправить самостоятельно (веб-разработка как для меня все в новинку). В идеале мне бы хотелось, чтобы он игнорировал правило, которое заставляет его завершать круг, и вместо этого просто указывал на заданный угол, хотя я знаю, что это, вероятно, невозможно сделать с помощью инструмента поворота CSS, поэтому, если есть что-то, что могло бы сделать то же самое в этом отношении это было бы очень признательно. Я сделал функциональный пример, чтобы продемонстрировать свою проблему в jsfiddle. https://jsfiddle.net/u3w4vz1n/latest/


< pre class="snippet-code-js lang-js Prettyprint-override">

Код: Выделить всё

const angles = { // Dictionary of where we want our static angle positions to be
button1: 290,
button2: 222,
button3: 115,
button4: 75,
button5: 0
}

var cursor = document.getElementById("cursor")
var currentAngle = 0;

$(".button").hover(function() { // When mouse enters button area

let next_angle = angles[this.id];
let turn_radius = 0;
let clockwise = (Math.abs(next_angle - currentAngle) < 180) ? true : false; // Calculates which direction is less degrees from source and returns boolean

if (clockwise) {
turn_radius = (next_angle - currentAngle);
} else {
turn_radius = "-" + (360 - Math.abs(next_angle - currentAngle));
}
cursor.style.rotate = turn_radius + "deg";
});

Код: Выделить всё

.button {
display: block;
z-index: -1;
position: absolute;
border: 4px solid;
border-radius: 45%;
text-decoration: none;
text-align: center;
font: bold;
font-size: medium;
background-color: white;
}

#button1 {
width: 30%;
height: 15%;
top: 40%;
left: 15%;
transform: translate(-40%, -15%);
}

#button2 {
width: 30%;
height: 15%;
top: 75%;
left: 25%;
transform: translate(-75%, -25%);
}

#button3 {
width: 30%;
height: 15%;
top: 80%;
left: 85%;
transform: translate(-80%, -85%);
}

#button4 {
width: 30%;
height: 15%;
top: 40%;
left: 75%;
transform: translate(-40%, -75%);
}

#button5 {
width: 30%;
height: 15%;
top: 10%;
left: 35%;
transform: translate(-10%, -35%);
}

#cursor {
width: 100px;
height: 100px;
position: absolute;
top: 40%;
left: 40%;
transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
-webkit-transition: all 0.25s ease-out;
}

Код: Выделить всё

Main Menu




[img]https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.sVcpgS1I_6kEJvuOecuuUgHaHa%26pid%3DApi&f=1&ipt=00bebfbdf248c4677c3ad5a9f6910bdfbd564aa401d634006f527981942f13d6&ipo=images[/img]

[url=#]Button1[/url]
[url=#]Button2[/url]
[url=#]Button3[/url]
[url=#]Button4[/url]
[url=#]Button5[/url]

Подробнее здесь: https://stackoverflow.com/questions/791 ... gle-points