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


91

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

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


2
$$가 jQuery의 별칭이라고 가정하면 [0]을 수행하면 기본 dom 객체 (jquery 객체와 반대)가 반환되고 .on()메소드 가 없습니다 . 그렇지 않다면-$$는 무엇입니까?
xec

그 중 어느 것도 유효하지 않습니다. jQuery를 사용하는 경우 style ()이라는 것이 없으며 네이티브 JS에서는 확실히 그렇게 작동하지 않습니다.
adeneo

1
전환 가능한 일련의 규칙이 있습니다. W3 사양
Goldentoa11 2013

@ Goldentoa11 top이 목록에있는 것으로 보이므로 top전환에 사용할 수 없는지에 대한 의심이 없습니다.
php_nub_qq

3
@php_nub_qq adaneo의 대답과 그것에 대한 내 의견을 확인하십시오. 모양을 보면 top값을 200으로 변경하기 전에 값 세트 (예 : 0)로 시작해야합니다.
xec

답변:


191

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

CSS

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

11
transition: top 1s ease 0s;에 대한 top유일한
올렉 Abrazhaev

16

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


2

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

left:0; display:block;


2

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>



-1

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

로드 될 때 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);
  }
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.