CSS 전환이 위쪽, 아래쪽, 왼쪽, 오른쪽에서 작동하지 않습니다.

CSS 전환이 위쪽, 아래쪽, 왼쪽, 오른쪽에서 작동하지 않습니다.

---

스타일이있는 요소가 있습니다.

position: relative;
transition: all 2s ease 0s;

그런 다음 클릭 후 부드럽게 위치를 변경하고 싶지만 스타일 변경을 추가하면 전환이 발생하지 않고 대신 요소가 즉시 이동합니다.

$$('.omre')[0].on('click',function(){
    $$(this).style({top:'200px'});
});

그러나 color예를 들어 속성을 변경하면 부드럽게 변경됩니다.

$$('.omre')[0].on('click',function(){
    $$(this).style({color:'red'});
});

그 원인은 무엇일까요? '과도 적'이 아닌 속성이 있습니까?

편집 : 나는 이것이 jQuery가 아니라 다른 라이브러리라고 언급해야한다고 생각합니다. 코드가 의도 한대로 작동하는 것처럼 보이고 스타일이 추가되고 있지만 전환은 두 번째 경우에만 작동합니까?

---

CSS에서 기본값을 설정해보십시오 (시작할 위치를 알려주기 위해)

CSS

position: relative;
transition: all 2s ease 0s;
top: 0; /* start out at position 0 */

---

CSS 규칙 세트에 최상위 값을 지정하여 애니메이션 할 값을 알 수 있습니다 .

---

제 경우에는 div 위치가 고정되었고 왼쪽 위치를 추가하는 것만으로는 충분하지 않아 디스플레이 블록을 추가 한 후에 만 ​​작동하기 시작했습니다.

left:0; display:block;

참고 URL : https://stackoverflow.com/questions/20383393/css-transition-doesnt-work-with-top-bottom-left-right