Перехід 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'});
});

Що може бути причиною цього? Чи є властивості, які не є "перехідними"?

EDIT : Думаю, я повинен був згадати, що це не jQuery, це інша бібліотека. Здається, код працює належним чином, стилі додаються, але перехід працює лише у другому випадку?

Спробуйте встановити значення за замовчуванням у css (щоб повідомити, де ви хочете, щоб воно розпочалося)

CSS

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

Можливо , вам необхідно вказати верхнє значення у вашому наборі правил CSS, так що він буде знати , яке значення живого з .

У моєму випадку позиція div була виправлена, додавання лівої позиції було недостатньо, вона почала працювати лише після додавання блоку відображення

left:0; display:block;

Щось, що не має значення для ОП, але, можливо, для когось іншого в майбутньому:

Для пікселів ( 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працює лише для, 0sі з цим не працює 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>

Чи є властивості, які не є "перехідними"?

Відповідь: Так .

Якщо властивість не перераховані тут НЕ «перехідна» .

Довідково: Анімаційні властивості 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);
  }
}