이미지 회전

나는 자바 스크립트 회전 목마를 쓸 수 있었고이 같은 nth-child 선택기와 CSS 전환을 사용하는 컴팩트 될 줄 알았는데 :이미지 회전

img { 
    transition: all 1s linear; /* or corresponding vendor prefixes */ 
    position:absolute; 
} 

img:nth-child(1) { 
    top: 0%; 
    left: 0%; 
} 

img:nth-child(2) { 
    top: 0%; 
    left: 50%; 
} 

/*and so on...*/

항목은 다음에 의해 회전 될 것이다 첫 번째 자식을 추가하거나 컨테이너의 마지막 자식을 추가합니다.

parent.appendChild(parent.children[0]);

이 방법은 추가 된 요소를 제외한 모든 요소에서 잘 작동합니다. 완전히 제거한 다음 다시 첨부하면 올바른 지점으로 끝나지만 은 전환 효과을 사용하지 않습니다. DOM에서 요소를 재배치 할 때 CSS 전환을 사용하는 방법이 있습니까?

jsFiddle Demo - 이미지를 진행하려면 문서를 클릭하십시오.

출처

2012-01-02 Dennis

+1 흥미로운 문제입니다. – pimvdb

나는 대답 할만큼 자신감이 없지만 나는 그렇게 생각하지 않는다.CSS 전환은 위의 평면에서 DOM 요소의 구성과 독립적으로 작동합니다. 자바 스크립트를 사용하여 추가 기능을 애니메이션으로 만들거나 더 나은 방법으로 nth-child 대신 클래스 (box-1, box-2, box-3, box-4)로 전환하고 클릭시 각 클래스를 증가 시키거나 Javascript를 사용하여 1로 재설정 할 수 있습니다. 이전에 4. – glortho

data-* 속성 및 선택 도구를 사용하여 끝났습니다. nth-child보다 약간 자세한 정보가 표시되지만 작업 이점이 있습니다. 또한 클래스 목록을 파싱하는 것보다 깔끔합니다.

<img src="http://placekitten.com/203/203" data-order=0 />

속성 선택기 nth-child 바꾸기 : 회전하면

img[data-order="1"] { 
    top: 0%; 
    left: 50%; 
}

는 dataset 순서를 증가

각 요소는 HTML 또는 자바 스크립트로 지정 될 수있는 data-order 특성을 갖는다 . 여기

var forEach = [].forEach, 
    nodes = document.body.children, 
    length = nodes.length; 

//On rotate: 
forEach.call(nodes, function(node) { 
    node.dataset.order++; 
    node.dataset.order %= length; 
});

가 final result입니다 : 이것은 우리가 속성을 변경하는 경우에도, 속성을 업데이트 할 것 같다.

출처

2012-08-05 14:29:53 Dennis

할 수있는 것은 요소에서 클래스 이름을 추가하거나 제거 할 수 있다는 것입니다. 예를 들어 div 요소가 있습니다. 그리고 클래스 값은 class="item"입니다. 해당 요소의 클래스 이름 목록에 애니메이션이있는 다른 클래스 이름을 추가하면 해당 div 요소는 즉시 해당 애니메이션을 표시합니다.

예 : div.className += " animatedClass";

출처

2012-01-02 22:23:45 tcak

정말 흥미로운 문제입니다. 그리고 여기 제가 생각해 낸 해결책이 있습니다. 일부 마크 업과 일부 CSS를 추가하지만 여전히 nth-child을 사용하면서 완성합니다. 솔직히, 나는이 작업을 좀 더 후에하고 좀 더 우아한 해결책을 찾을 수 없는지 알아 보겠지 만 지금은 jsFiddle을 포크로 썼다.

핵심은 래퍼 div에서 클래스를 전환하고이를 사용하여 스타일을 회전시키는 것입니다.

그러나 실제로는 추가 이미지를 애니메이션으로 만들 수 있지만 여기서 생각할 수는 있지만 그렇게 할 수는 없습니다. 초기 추가 애니메이션 일 것입니다.이 애니메이션은 페이지를 처음로드했을 때 애니메이션이 적용된다는 것을 의미합니다. @keyframes을 사용하여이 작업을 수행하고 원하는 이미지가 원하는 위치의 시작 위치에서 슬라이드되도록 이미지를 설정할 수 있습니다. 그러나 다시 한번, 이것은 첫 번째 하중에서도 발생할 것입니다. 첫 번째 하중에 대해 '제자리에 회전'하여 가짜로 만들 수 있습니다. 따라서 모든 이미지를 한 번로드하면됩니다.

출처

2012-01-02 22:44:23 Ktash

이미지 회전

답변

관련 문제