CSS Transition không hoạt động với trên, dưới, trái, phải

Tôi có một yếu tố với phong cách

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

Sau đó, tôi muốn thay đổi vị trí của nó một cách trơn tru sau khi nhấp vào nó, nhưng khi tôi thêm kiểu thay đổi, quá trình chuyển đổi không diễn ra, thay vào đó phần tử di chuyển ngay lập tức.

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

Tuy nhiên, nếu tôi thay đổi thuộc colortính chẳng hạn, nó sẽ thay đổi trơn tru.

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

Điều gì có thể là nguyên nhân của điều này? Có thuộc tính nào không phải là 'chuyển tiếp' không?

CHỈNH SỬA : Tôi đoán tôi nên đề cập rằng đây không phải là jQuery, nó là một thư viện khác. Mã dường như hoạt động như dự định, các kiểu đang được thêm vào, nhưng quá trình chuyển đổi chỉ hoạt động trong trường hợp thứ hai?

Hãy thử đặt một giá trị mặc định trong css (để cho nó biết bạn muốn nó bắt đầu từ đâu)

CSS

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

Có lẽ bạn cần chỉ định một giá trị cao nhất trong bộ quy tắc css của mình để nó biết giá trị nào cần tạo hoạt ảnh từ đó .

Trong trường hợp của tôi, vị trí div đã được cố định, việc thêm vị trí bên trái là không đủ, nó chỉ bắt đầu hoạt động sau khi thêm khối hiển thị

left:0; display:block;

Một cái gì đó không liên quan đến OP, nhưng có thể cho người khác trong tương lai:

Đối với pixel ( px), nếu giá trị là "0", đơn vị có thể bị bỏ qua: right: 0và right: 0pxcả hai đều hoạt động.

Tuy nhiên, tôi nhận thấy rằng trong Firefox và Chrome, điều này không đúng với đơn vị giây ( s). Trong khi transition: right 1s ease 0scác công trình, transition: right 1s ease 0(đơn vị thiếu scho giá trị cuối cùng transition-delay) không không (nó làm việc tại Edge tuy nhiên).

Trong ví dụ sau, bạn sẽ thấy rằng rightcông trình cho cả hai 0pxvà 0, nhưng transitionchỉ hoạt động cho 0svà nó không làm việc với 0.

#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>

Có thuộc tính nào không phải là 'chuyển tiếp' không?

Trả lời: Có .

Nếu thuộc tính không được liệt kê ở đây thì nó không phải là 'chuyển tiếp' .

Tham khảo: Thuộc tính CSS Animatable

Tôi gặp phải vấn đề này ngày hôm nay. Đây là giải pháp hacky của tôi.

Tôi cần một phần tử vị trí cố định để chuyển đổi lên 100 pixel khi nó tải.

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);
  }
}