CSS Transition nie działa z górnym, dolnym, lewym i prawym

Mam element ze stylem

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

Następnie chcę płynnie zmienić jego położenie po kliknięciu na niego, ale kiedy dodaję zmianę stylu, przejście nie następuje, zamiast tego element porusza się natychmiast.

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

Jeśli jednak zmienię colorna przykład właściwość, zmienia się to płynnie.

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

Co może być tego przyczyną? Czy istnieją nieruchomości, które nie są „przejściowe”?

EDYCJA : Myślę, że powinienem był wspomnieć, że to nie jest jQuery, to kolejna biblioteka. Kod wydaje się działać zgodnie z przeznaczeniem, style są dodawane, ale przejście działa tylko w drugim przypadku?

Spróbuj ustawić wartość domyślną w css (aby dać mu znać, gdzie ma się zacząć)

CSS

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

Być może trzeba określić górną wartość w zestawie reguł CSS, tak, że będzie wiedzieć, jaką wartość ożywionej z .

W moim przypadku pozycja div została ustalona, ​​dodanie lewej pozycji nie wystarczyło, zaczęło działać dopiero po dodaniu bloku wyświetlania

left:0; display:block;

Coś, co nie jest istotne dla PO, ale może dla kogoś innego w przyszłości:

W przypadku pikseli ( px), jeśli wartość wynosi „0”, jednostkę można pominąć: right: 0iright: 0px obie działają.

Jednak zauważyłem, że w Firefoksie i Chrome tak nie jest w przypadku jednostki sekund ( s). Chociaż transition: right 1s ease 0sdziała, transition: right 1s ease 0(brak jednostki sdla ostatniej wartości transition-delay) nie ( działa pracę w Krawędzi jednak).

W poniższym przykładzie zobaczysz, że rightdziała to zarówno w przypadku, jak 0pxi 0, ale transitiondziała tylko w przypadku 0si nie działa z 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>

Czy istnieją nieruchomości, które nie są „przejściowe”?

Odpowiedź: tak .

Jeżeli nieruchomość nie jest wymieniona w tym miejscu, nie jest to „przejściowa” .

Odniesienie: Animowane właściwości CSS

Dzisiaj napotkałem ten problem. Oto moje zepsute rozwiązanie.

Potrzebowałem elementu o stałej pozycji, aby przejść w górę o 100 pikseli podczas ładowania.

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