Javascript 多元素循环移动-平滑过渡

我试图通过单击键盘的左右箭头来创建一个循环导航，其中

n

元素可导航。我使用带有特定CSS3

rotate

和

translate

值的类和一点javascript来更改类

我的问题是类为

4

和

5

的元素之间的转换，即在

360deg

和

30deg

之间转换的元素，其方向与我希望的方向相反。你可以看到明显的不想要的行为

旁注：我在项目中使用prefixfree.min.js，以防止表单必须手动输入所有浏览器前缀

---

是否有一个CSS唯一的修复我的问题，我不知道？当试图使用javascript获取

translate

值时，是什么导致了错误？

首先，我想最好的解决方案可能是旋转基圆；我几乎可以肯定，结果会更好、更容易

但这只是一个附带的想法，让我们来看看你发布的问题

我已经为您的问题做了一个变通方法，创建了一个可以正确移动有问题类的类。我的想法是提供一个动画，使动作正常：

.foura   { -webkit-transform: rotate(360deg) translate(200px); 
    -webkit-animation: aclock .3s linear 1;
    transform: rotate(360deg) translate(200px); 
    animation: aclock .3s linear 1;
    transition: none;
}
@keyframes aclock {
    0% {transform: rotate(30deg) translate(200px);}
   100% {transform: rotate(0deg) translate(200px);}
}

其思想是，通过动画从30度移动到360度，可以更改为从30度移动到0度

我为五班提供了另一个类似的课程

剩下的问题是，脚本必须根据旋转感觉将元素设置为class four或foura，对于five和fivea也是如此

这导致了（有些混乱）脚本：

根据我的第一个想法，我在脚本中添加了以下代码：

   case 38:
    angle = angle + 30;
    var circleBig = document.getElementsByClassName("circle-big")[0];
    var style = "rotate(" + angle + "deg)";
    circleBig.style.webkitTransform = style;
    break;
case 40:
    angle = angle - 30;
    var circleBig = document.getElementsByClassName("circle-big")[0];
    var style = "rotate(" + angle + "deg)";
    circleBig.style.webkitTransform = style;
    break;

并且还添加了到大圆圈的过渡。现在我认为它可以正常工作（上下箭头！）

全新版本 为了满足新的要求（保持内圆直立），我重新设计了大部分小提琴。我采纳了我从莱维鲁那里看到的一个想法，在没有辅助跳水的情况下进行轮换。它包括将变换设置为角度+平移+位置角度。这会让div去你想去的地方，不旋转

一旦决定这样做，脚本必须修改内圈的样式，而不是基圆的样式。为了方便起见，我在每个元素中都存储了特定元素的角度（在数据属性中）

生成的HTML与此类似：

<div class="circle-big">
    <div class="circle one" data-angle=270>1</div>
    <div class="circle two" data-angle=300>2</div>
    <div class="circle three" data-angle=330>3</div>
    <div class="circle four" data-angle=0>4</div>
    <div class="circle five" data-angle=30>5</div>
    <div class="circle six" data-angle=60>6</div>
    <div class="circle seven" data-angle=90>7</div>
    <div class="circle eight" data-angle=120>8</div>
    <div class="circle nine" data-angle=150>9</div>
    <div class="circle ten" data-angle=180>10</div>
    <div class="circle eleven" data-angle=210>11</div>
    <div class="circle twelve" data-angle=240>12</div>
    <div class="circle-inner"></div>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

剧本是

var circleArray = document.getElementsByClassName("circle");
var angle = 0;

window.onload = chargearray;

function chargearray () {
    for (var i = 0, j = circleArray.length; i < j; i++) {
        var circle = circleArray[i];
        var circleAngle = parseInt (circle.dataset.angle);
        var totalAngle = angle + circleAngle
        var style = "rotate(" + totalAngle + "deg) translate(200px)";
        totalAngle = - totalAngle;
        style = style + " rotate(" + totalAngle + "deg)"
        circle.style.webkitTransform = style;
        circle.style.Transform = style;
    }
}

document.onkeydown = function (e) {
    e = e || window.event;
    switch(e.which || e.keyCode) {
        case 37:
            angle = angle + 30;
            chargearray ();
            break;
        case 39:
            angle = angle - 30;
            chargearray ();
            break;
    }
}

var circleArray=document.getElementsByClassName（“圆圈”）；
var角=0；
window.onload=chargearray；
函数chargearray（）{
对于（var i=0，j=circleArray.length；i

伟大的解决方案，+1！当点击一个按钮时，它可以完美地工作，并且给了转换足够的时间来完成。也就是说，如果在完成转换之前单击箭头，那么我希望避免另一种行为。除了在过渡期间限制箭头被点击之外，还有什么帮助吗？我很想尝试旋转基础圆，并将其他圆连接到它，但我不确定如何定位元素，并将它们绑定到当前设置位置的父元素。这个想法有什么帮助吗？我在上面的评论中提到的神经质是我试图远离CSS动画的原因。真的，我不知道如何修复由紧张的用户引起的神经质。我添加了另一个解决方案，基于我第一个旋转基圆的想法。我现在注意到我只包含了webkit翻译，对此我很抱歉！我不介意webkit的唯一翻译，正如我说的，我使用了前缀器。谢谢你的第二个版本！这正是我在尝试javascript修复时所要寻找的，只是您取消了对导致我出错的部分的需求。我只是拿了你的作品，把不必要的部分拿出来清理一下（对于其他可能有兴趣使用它的人来说），很高兴能帮助你。顺便说一下，当您获得变换的当前值时，它始终是矩阵格式的；将其转换回旋转并非易事。最好将其保存在脚本中的变量中。

.circle-big {
    position: relative;
    height:500px;
    width:500px;
    background:red;
    border-radius: 50% 50%;
    margin: 10% 10%;
    border:5px solid black;
}
.circle-inner {
    border-radius: 50%;
    width: 300px;
    height: 300px;
    border: 5px solid white;
    background-color: black;
    display: block;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    margin-top:-155px;
    margin-left:-155px;
}
.circle {
    border-radius: 50%;
    width: 70px;
    height: 70px;
    background-color: white;
    display: block;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    margin-top:-35px;
    margin-left:-35px;
    transition: all .3s linear;
}
.one    { -webkit-transform: rotate(270deg) translate(200px); 
          transform: rotate(270deg) translate(200px); 
          background:blue; }
.two    { -webkit-transform: rotate(300deg) translate(200px); 
          transform: rotate(300deg) translate(200px); }
.three  { -webkit-transform: rotate(330deg) translate(200px);
          transform: rotate(330deg) translate(200px);
}
.four   { -webkit-transform: rotate(360deg) translate(200px);
          transform: rotate(360deg) translate(200px);}
.foura   { -webkit-transform: rotate(360deg) translate(200px); 
          -webkit-animation: aclock .3s linear 1;
          transform: rotate(360deg) translate(200px); 
          animation: aclock .3s linear 1;
          transition: none;
}
.five   { -webkit-transform: rotate(30deg)  translate(200px);
          transform: rotate(30deg)  translate(200px);}
.fivea   { -webkit-transform: rotate(30deg)  translate(200px); 
          -webkit-animation: clock .3s linear 1;
          transform: rotate(30deg)  translate(200px); 
          animation: clock .3s linear 1;
          transition: none;
}
.six    { -webkit-transform: rotate(60deg)  translate(200px);
          transform: rotate(60deg)  translate(200px);}
.seven  { -webkit-transform: rotate(90deg)  translate(200px);
           transform: rotate(90deg)  translate(200px);}
.eight  { -webkit-transform: rotate(120deg) translate(200px);
          transform: rotate(120deg) translate(200px);}
.nine   { -webkit-transform: rotate(150deg) translate(200px); 
          transform: rotate(150deg) translate(200px); }
.ten    { -webkit-transform: rotate(180deg) translate(200px); 
          transform: rotate(180deg) translate(200px);}
.eleven { -webkit-transform: rotate(210deg) translate(200px);
          transform: rotate(210deg) translate(200px);}
.twelve { -webkit-transform: rotate(240deg) translate(200px);
          transform: rotate(240deg) translate(200px);}

@-webkit-keyframes clock {
    0% {-webkit-transform: rotate(0deg) translate(200px);}
  100% {-webkit-transform: rotate(30deg) translate(200px);}
}

@-webkit-keyframes aclock {
    0% {-webkit-transform: rotate(30deg) translate(200px);}
  100% {-webkit-transform: rotate(0deg) translate(200px);}
}

@keyframes clock {
    0% {transform: rotate(0deg) translate(200px);}
  100% {transform: rotate(30deg) translate(200px);}
}

@keyframes aclock {
    0% {transform: rotate(30deg) translate(200px);}
  100% {transform: rotate(0deg) translate(200px);}
}

   case 38:
    angle = angle + 30;
    var circleBig = document.getElementsByClassName("circle-big")[0];
    var style = "rotate(" + angle + "deg)";
    circleBig.style.webkitTransform = style;
    break;
case 40:
    angle = angle - 30;
    var circleBig = document.getElementsByClassName("circle-big")[0];
    var style = "rotate(" + angle + "deg)";
    circleBig.style.webkitTransform = style;
    break;

<div class="circle-big">
    <div class="circle one" data-angle=270>1</div>
    <div class="circle two" data-angle=300>2</div>
    <div class="circle three" data-angle=330>3</div>
    <div class="circle four" data-angle=0>4</div>
    <div class="circle five" data-angle=30>5</div>
    <div class="circle six" data-angle=60>6</div>
    <div class="circle seven" data-angle=90>7</div>
    <div class="circle eight" data-angle=120>8</div>
    <div class="circle nine" data-angle=150>9</div>
    <div class="circle ten" data-angle=180>10</div>
    <div class="circle eleven" data-angle=210>11</div>
    <div class="circle twelve" data-angle=240>12</div>
    <div class="circle-inner"></div>
</div>

var circleArray = document.getElementsByClassName("circle");
var angle = 0;

window.onload = chargearray;

function chargearray () {
    for (var i = 0, j = circleArray.length; i < j; i++) {
        var circle = circleArray[i];
        var circleAngle = parseInt (circle.dataset.angle);
        var totalAngle = angle + circleAngle
        var style = "rotate(" + totalAngle + "deg) translate(200px)";
        totalAngle = - totalAngle;
        style = style + " rotate(" + totalAngle + "deg)"
        circle.style.webkitTransform = style;
        circle.style.Transform = style;
    }
}

document.onkeydown = function (e) {
    e = e || window.event;
    switch(e.which || e.keyCode) {
        case 37:
            angle = angle + 30;
            chargearray ();
            break;
        case 39:
            angle = angle - 30;
            chargearray ();
            break;
    }
}