CSS 過渡不適用於頂部、底部、左側、右側

Question

我有一個有風格的元素

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，它是另一個庫。 代碼似乎按預期工作，正在添加樣式，但過渡僅適用於第二種情況？

Answer 1

嘗試在 CSS 中為top設置一個默認值，讓它在轉換之前知道你希望它從哪里開始：

CSS

position: relative;
transition: top 2s ease 0s; /* only transition top property */
top: 0; /* start transitioning from position '0' instead of 'auto' */

需要這樣做的原因是因為您無法從關鍵字轉換，並且top的默認值是auto 。

出於性能原因， 准確指定要轉換的內容（僅top而不是all ）也是一種很好的做法，這樣您就不會無意中轉換其他內容（例如color ）。

Answer 2

也許您需要在 css 規則集中指定一個 top 值，以便它知道要從.

Answer 3

在我的情況下 div 位置是固定的，添加左位置是不夠的，只有在添加顯示塊后才開始工作

left:0; display:block;

Answer 4

與 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>

Answer 5

是否存在非“過渡性”的屬性？

答：是的。

如果此處未列出該屬性，則它不是'transitional' 。

參考： 動畫 CSS 屬性

Answer 6

我今天遇到了這個問題。 這是我的hacky解決方案。

我需要一個固定位置元素在加載時向上過渡 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);
  }
}