การเปลี่ยน 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;

สิ่งที่ไม่เกี่ยวข้องกับ OP แต่อาจจะมีสำหรับคนอื่นในอนาคต:

สำหรับพิกเซล ( px) ถ้าค่าเป็น "0" สามารถละหน่วยได้: right: 0และright: 0pxทั้งสองอย่างจะทำงาน

อย่างไรก็ตามฉันสังเกตเห็นว่าใน Firefox และ Chrome นี่ไม่ใช่กรณีสำหรับหน่วยวินาที ( s) ในขณะที่transition: right 1s ease 0sผลงานtransition: right 1s ease 0(หน่วยที่ขาดหายไปsสำหรับค่าสุดท้ายtransition-delay) ไม่ได้ (มันไม่ทำงานในขอบ แต่)

ในตัวอย่างต่อไปนี้คุณจะเห็นว่าrightผลงานของทั้งสอง0pxและ0แต่transitionทำงานเฉพาะสำหรับและมันไม่ได้ทำงานกับ0s0

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