CSS Transition не работает с верхним, нижним, левым, правым

У меня есть стильный элемент

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работает только для 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);
  }
}