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

Program / 글쓴이

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

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;

답변

OP와 관련이 없지만 미래의 다른 사람을위한 것 :

픽셀 (들면 px값이 “0”인 경우), 상기 유닛은 생략 될 수있다 : right: 0그리고 right: 0px두 작품.

그러나 Firefox와 Chrome에서는 이것이 초 단위 ( ) 의 경우 가 아니라는 것을 알았습니다 s. transition: right 1s ease 0s작동 하는 동안 transition: right 1s ease 0( s마지막 값에 대한 누락 단위 transition-delay) 는 작동 하지 않습니다 ( 그러나 Edge 에서는 작동합니다).

다음 예제에서는 및 에서 right모두 작동 하지만 에서만 작동 하고에서는 작동하지 않는 것을 볼 수 있습니다 .0px0transition0s0

#box {
    border: 1px solid black;
    height: 240px;
    width: 260px;
    margin: 50px;
    position: relative;
}
.jump {
    position: absolute;
    width: 200px;
    height: 50px;
    color: white;
    padding: 5px;
}
#jump1 {
    background-color: maroon;
    top: 0px;
    right: 0px;
    transition: right 1s ease 0s;
}
#jump2 {
    background-color: green;
    top: 60px;
    right: 0;
    transition: right 1s ease 0s;
}
#jump3 {
    background-color: blue;
    top: 120px;
    right: 0px;
    transition: right 1s ease 0;
}
#jump4 {
    background-color: gray;
    top: 180px;
    right: 0;
    transition: right 1s ease 0;
}
#box:hover .jump {
    right: 50px;
}
<div id="box">
  <div class="jump" id="jump1">right: 0px<br>transition: right 1s ease 0s</div>
  <div class="jump" id="jump2">right: 0<br>transition: right 1s ease 0s</div>
  <div class="jump" id="jump3">right: 0px<br>transition: right 1s ease 0</div>
  <div class="jump" id="jump4">right: 0<br>transition: right 1s ease 0</div>
</div>

스 니펫 확장

답변

‘과도 적’이 아닌 속성이 있습니까?

답변 : 예 .

속성이 여기에 나열 되지 않은 경우 ‘전환’ 이 아닙니다 .

참조 : 애니메이션 가능한 CSS 속성

답변

오늘이 문제를 만났습니다. 여기 내 해키 솔루션이 있습니다.

로드 될 때 100 픽셀 위로 전환하려면 고정 위치 요소가 필요했습니다. 

var delay = (ms) => new Promise(res => setTimeout(res, ms));
async function animateView(startPosition,elm){
  for(var i=0; i<101; i++){
    elm.style.top = `${(startPosition-i)}px`;
    await delay(1);
  }
}

답변