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ではなく、それが別のライブラリであることを述べるべきだったと思います。コードは意図したとおりに機能しているようですが、スタイルが追加されていますが、移行は2番目のケースでのみ機能しますか？

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がない）は動作しません（ただし、Edge では動作します）。

次の例では、その表示されます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>

「過渡的」ではないプロパティはありますか？

回答：はい。

プロパティがここにリストされていない場合、それは'transitional'ではありません。

リファレンス：アニメート可能な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);
  }
}