원형으로 움직이는 여러 요소 - 부드러운 전환

Question

키보드의 오른쪽 및 왼쪽 화살표를 클릭하여 이동 가능한 n 요소가있는 순환 탐색을 만들려고합니다. 특정 CSS3 rotate 및 translate 값을 가진 클래스와 약간의 javascript를 사용하여 클래스를 변경합니다.

내 문제는 그 클래스 four 및 five, I가 원하는 것보다 반대 방향으로 이동하고 360deg30deg간에 변환 하나와 소자 사이의 전환. 당신은 내가 이것에 대한 CSS 수정을 선호 명백한 원치 않는 행동을 here in this jsFiddle

.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); } 

를 볼 수 있지만 나는 또한 here을 찾을 수있는 자바 스크립트를 시도했다. 나는이 예제에서 왼쪽 화살표를 사용하여 시도했다. 자바 스크립트를 사용하여 내 접근 방식은 문자열 형식으로 현재 번역 된 값을 얻고, rotate도 제거하고 오른쪽 또는 왼쪽 화살표를 눌렀는지 여부에 따라 30도를 더하거나 뺍니다. 이 방법의 현재 문제는 element.style.webkitTransform (Chrome을 사용하고 있습니다.)에 대한 가치를 제공하지 않는다는 것입니다. 몇 가지 이유로 비어 있습니다. 또한 나는 CSS의 모든 문제를 접두어로 붙이지 않아도된다. 따라서 CSS 만 고쳐야하는 이유가있다.

자바 스크립트에서의 시도 (어떤 이유로 첫 번째 줄이 작동하지 않으므로 테스트되지 않음) :

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는 내가 모르고 나는 내 문제에 대한이 수정 프로그램의 접두사를 수동으로 입력 ? 자바 스크립트를 사용하여 translate 값을 가져 오는 중 오류가 발생하는 이유는 무엇입니까?

Answer 1

우선 가장 좋은 해결책은 기본 원형을 회전시키는 것입니다. 나는 결과가 더 좋고 쉬울 것이라고 거의 확신한다.

하지만 이것은 옆에있는 생각 일 뿐이며 게시하는 문제로 가보겠습니다.

문제가있는 클래스를 올바르게 옮길 수있는 클래스를 만드는 작업에 대한 작업을 수행했습니다.

.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);} 
} 

아이디어는 애니메이션을 통해 수행되고 360 ℃, 30 ℃,,의 움직임이 30 ° 이상 갈 변경 될 수 있는지

0 ℃로 : 내 생각은 이동 확인을하지 애니메이션을 제공하는 것입니다 .

클래스 5에 대해 비슷한 클래스를 제공합니다.

나머지 문제는 스크립트가 회전 감각에 따라 클래스 4 또는 foura로 요소를 설정하고 5 및 5a에도 ​​동일하게 설정해야한다는 것입니다.

이 (다소 지저분) 스크립트에이 리드

:

document.onkeydown = function (e) { 
    e = e || window.event; 
    switch(e.which || e.keyCode) { 
     case 37: 
      for (var i = 0, j = circleArray.length; i < j; i++) { 
       var curClassList = circleArray[i].classList, 
        curClass = curClassList.toString().split(' ')[1]; 
        baseClass = curClass; 
        if (baseClass == "fivea") { 
         baseClass = "five"; 
      } 
        if (baseClass == "foura") { 
         baseClass = "four"; 
      } 

       if(circleClassArray.indexOf(baseClass) - 1 >= 0) 
       { 
        var newClass = circleClassArray[circleClassArray.indexOf(baseClass) - 1]; 
        if (newClass == "four") { 
         newClass = "foura"; 
      } 
        curClassList.add(newClass) 
        curClassList.remove(curClass); 
       } else { 
        curClassList.add(circleClassArray[j - 1]); 
        curClassList.remove(curClass); 
       } 
      } 
      break; 
     case 39: 
      for (var i = 0, j = circleArray.length; i < j; i++) { 
       var curClassList = circleArray[i].classList, 
        curClass = curClassList.toString().split(' ')[1]; 
        baseClass = curClass; 
        if (baseClass == "fivea") { 
         baseClass = "five"; 
      } 
        if (baseClass == "foura") { 
         baseClass = "four"; 
      } 
       if(circleClassArray.indexOf(baseClass) + 1 < j) 
       { 
        var newClass = circleClassArray[circleClassArray.indexOf(baseClass) + 1]; 
        if (newClass == "five") { 
         newClass = "fivea"; 
      } 
        curClassList.add(newClass) 
        curClassList.remove(curClass); 
       } else { 
        curClassList.add(circleClassArray[0]); 
        curClassList.remove(curClass); 
       } 
      } 
      break; 
    } 
} 

그리고이 전체 CSS입니다 :

.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);} 
} 

updated fiddle

내 첫번째 생각에 따라, 내가 추가 한 다음 스크립트 코드 :

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; 

그리고 큰 원으로의 전환도 추가되었습니다. 지금은이 작품을 좋아 생각 (위쪽 및 아래쪽 화살표 아래에!) 나는 바이올린의 대부분을 재 설계 한 (수직 내부 원을 유지하는) 새로운 요구 사항에 대한

second version

브랜드의 새로운 버전

. 레아 베루 (Lea Verou)에서 보았던 아이디어를 익숙한 div없이 회전시키기 위해 적용했습니다. 이것은 변환을 각도 + 이동 + 각도로 설정하는 것으로 구성됩니다. 그건 div가 당신이 원하는 곳으로 가고, 회전하지 않습니다.

일단 이런 식으로 결정되면 스크립트는 기본 원의 스타일이 아닌 내부 원의 스타일을 수정해야합니다. 이를 쉽게하기 위해 모든 요소에 특정 요소의 각을 저장했습니다 (데이터 속성에서).

<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; 
    } 
}