CSS 전환 혼합 절대 및 상대 위치

Question

짧고 달콤한 버전 :

는 부드러운 CSS-전환과 position: relative 및 position: absolute을 결합 할 수 있습니까?

자세한 정보 버전 :

내가이 축소 및 확장 상태를 가질 수 있도록 wan't 작은 위젯 (나는 갑판 호출)를 만드는거야. 지금까지 모든 것이 잘 작동하고 있습니다.

두 상태를 전환하면 자연스럽게 전환 애니메이션이 보장됩니다. 이것은 너무 효과적이지만 그것이 실현되기를 바라는 방식이 아닙니다. 제가하고 싶은 것은 JavaScript처럼 절대 위치 지정을 사용하는 대신 CSS 전환을 사용하는 것입니다.

아아, 현재 시나리오는 확장 된 상태에서 항상 갑판에있는 카드가 배치되며, 그 위치는 갑판에 추가 될 때 즉시 계산됩니다. 접을 때 처음 4 개는 계단식 방식으로 쌓이고 나머지는 4 번째 카드 상단에 쌓입니다. 시각적으로 스택을 모방합니다.

이 접근법의 문제점은 카드를 배치하기위한 일반적인 레이아웃 흐름에 의존 할 수 없다는 것입니다. 확장 상태의 카드에 position: relative을 사용하면 카드는 차례대로 잘 흐릅니다. 그러나 접힌 상태로의 전환은 움직이지 않고 있습니다. 단순히 한 위치에서 다른 위치로 순간적으로 스냅합니다. 이것은 처음부터 절대 위치 지정이 없기 때문에 브라우저가 어디에서 전환할지 명확하게 알 수 없기 때문에 당연한 논리입니다.

CSS (에만 관련 규칙) :

div.deck-container { 
    position: relative; 
} 
div.deck-container li { 
    display: inline-block; 
    position: relative; 

    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 
div.deck-container.collapsed li { 
    position: absolute; 
    left: 9px; 
    top: 6px; 
} 
div.deck-container.collapsed li:first-child { 
    left: 0; 
    top: 0px; 
} 
div.deck-container.collapsed li:nth-child(2) { 
    left: 3px; 
    top: 2px; 
} 
div.deck-container.collapsed li:nth-child(3) { 
    left: 6px; 
    top: 4px; 
} 

HTML (관련 마크 업 만 해당) :

<div class="deck-container"> 
    <ul> 
     <li>Card 1</li> 
     <li>Card 2</li> 
     <li>Card 3</li> 
     <li>Card 4</li> 
     <li>Card 5</li> 
    </ul> 
</div> 

꿈꾸는에서

내가 지금까지 가지고하면이 (Fiddle)입니다 클래스 collapsed을 div.deck-container에 추가하면 카드가 접힌 위치로 움직이거나 그 반대의 경우에도 애니메이션이 적용되지만 이는 불가능합니다. 누군가 내가 틀렸다고 말해줘.

Answer 1

아니요, position 속성을 애니메이션으로 만들 수 없습니다. 애니메이션으로 만들 수있는 CSS 속성에는 여러 가지가 있으며 대부분 숫자 나 색상이 값으로 사용됩니다 (일부 예외가 있음). w3c css transitions especification에서이 목록을 볼 수 있습니다.

어쨌든 top 및 left 속성을 애니메이션 할 수 있으므로 this fiddle처럼 효과를 얻기 위해 마크 업을 약간 변경할 수 있습니다.

div.deck-container { 
    position: relative; 
} 
div.deck-container li { 
    background-color: #fff; 
    position: absolute; 
    border: 1px solid black; 
    padding: 3px; 
    display: inline-block; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 
div.deck-container li { 
    left: 160px; 
    top: 0px; 
} 
div.deck-container li:first-child { 
    left: 0px; 
    top: 0px; 
} 
div.deck-container li:nth-child(2) { 
    left: 40px; 
    top: 0px; 
} 
div.deck-container li:nth-child(3) { 
    left: 80px; 
    top: 0px; 
} 
div.deck-container li:nth-child(4) { 
    left: 120px; 
    top: 0px; 
} 
div.deck-container.collapsed li { 
    left: 12px; 
    top: 8px; 
} 
div.deck-container.collapsed li:first-child { 
    left: 0; 
    top: 0px; 
} 
div.deck-container.collapsed li:nth-child(2) { 
    left: 3px; 
    top: 2px; 
} 
div.deck-container.collapsed li:nth-child(3) { 
    left: 6px; 
    top: 4px; 
} 
div.deck-container.collapsed li:nth-child(4) { 
    left: 9px; 
    top: 6px; 
} 

그냥 원래 위치를 절대 위치로 설정했습니다. 그런 다음 클래스를 전환하면 top 및 left 속성 만 변경되므로 전환이 작동합니다.

Answer 2

@ nikc.org 어쩌면 당신은 대신 translate을 사용할 수

div.deck-container { 
     position: relative; 
    } 
    div.deck-container li { 
     background-color: #fff; 
     position: relative; 
     border: 1px solid black; 
     padding: 3px; 
     display: inline-block; 
     -webkit-transition: all 0.5s ease-in-out; 
     -moz-transition: all 0.5s ease-in-out; 
     -o-transition: all 0.5s ease-in-out; 
     -ms-transition: all 0.5s ease-in-out; 
     transition: all 0.5s ease-in-out; 
    } 

    div.deck-container.collapsed li:first-child { 
     -webkit-transform: translate(0, 0); 
     -moz-transform: translate(0, 0); 
      -ms-transform: translate(0, 0); 
      -o-transform: translate(0, 0); 
       transform: translate(0, 0); 
    } 
    div.deck-container.collapsed li:nth-child(2) { 
     -webkit-transform: translate(-100%, 2px); 
     -moz-transform: translate(-100%, 2px); 
      -ms-transform: translate(-100%, 2px); 
      -o-transform: translate(-100%, 2px); 
       transform: translate(-100%, 2px); 
    } 
    div.deck-container.collapsed li:nth-child(3) { 
     -webkit-transform: translate(-200%, 4px); 
     -moz-transform: translate(-200%, 4px); 
      -ms-transform: translate(-200%, 4px); 
      -o-transform: translate(-200%, 4px); 
       transform: translate(-200%, 4px); 
    } 

working example