javascript - 円を描くように移動する複数の要素 - スムーズな移行

Question

nキーボードの右矢印と左矢印をクリックして移動できる要素を持つ循環ナビゲーションを作成しようとしています。クラスを変更するために、特定の CSS3rotateとtranslate値を持つクラスと、少しの JavaScript を使用します。

私の問題は、クラスfourとを持つ要素間の移行、つまりとの間でfive変換される要素が、希望する方向とは反対の方向に進むことです。この jsFiddle で明らかな不要な動作を確認できます。360deg30deg

.one    { transform: rotate(270deg) translate(200px); }
.two    { transform: rotate(300deg) translate(200px); }
.three  { transform: rotate(330deg) translate(200px); }
.four   { transform: rotate(360deg) translate(200px); }<-- Problematic transition
.five   { transform: rotate(30deg)  translate(200px); }<-- Problematic transition
.six    { transform: rotate(60deg)  translate(200px); }
.seven  { transform: rotate(90deg)  translate(200px); }
.eight  { transform: rotate(120deg) translate(200px); }
.nine   { transform: rotate(150deg) translate(200px); }
.ten    { transform: rotate(180deg) translate(200px); }
.eleven { transform: rotate(210deg) translate(200px); }
.twelve { transform: rotate(240deg) translate(200px); }

これには CSS の修正を希望しますが、ここにある JavaScript の修正も試みました。この例では、左矢印のみを使用しようとしました。JavaScript を使用した私のアプローチは、現在の変換された値を文字列形式でrotate取得し、そこから度数を取り除き、右矢印または左矢印が押されたかどうかに応じて 30 度を加算または減算することです。このアプローチの現在の問題は、値が得られないことですelement.style.webkitTransform(私は Chrome を使用しています)。何らかの理由で値が空になっているだけです。また、JavaScript のすべてにプレフィックスを付けたくないので、CSS のみの修正が必要な理由

私のJavaScriptでの試み（最初の行が何らかの理由で機能しないため、テストされていません）：

var thisTransform = circleArray[i].style.webkitTransform;
if (thisTransform.indexOf("rotate(") >= 0) {
    var newDeg = parseInt(thisTransform.split("rotate(")[1].substring(thisTransform.indexOf("deg"))) - 30;
    circleArray[i].style.webkitTransform = "rotate(" + newDeg + "deg) translate(200px) !important;";
}

補足: 私は自分のプロジェクトで prefixfree.min.js を使用して、フォームがすべてのブラウザプレフィックスを手動で入力する必要がないようにしています。

私が気付いていない私の問題に対する CSS のみの修正はありますか? translatejavascript を使用して値を取得しようとすると、エラーの原因は何ですか?

javascript - 円を描くように移動する複数の要素 - スムーズな移行

1 に答える 1

Related

Reference