CSS 过渡不适用于上、下、左、右答案

【问题标题】：CSS Transition doesn't work with top, bottom, left, rightCSS 过渡不适用于上、下、左、右
【发布时间】：2013-12-21 09:55:12
【问题描述】：

我有一个带有样式的元素

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，它是另一个库。代码似乎按预期工作，正在添加样式，但转换仅在第二种情况下有效？

【问题讨论】：

假设 $$ 是 jQuery 的别名，执行 [0] 将返回本机 dom 对象（与 jquery 对象相反）并且没有任何 .on() 方法。如果不是 - $$ 是什么？
这些都不是有效的，如果你使用 jQuery，没有任何东西叫做 style()，而在原生 JS 中，它肯定不会那样工作。
有一组可以转换的规则。见W3 Specification
@Goldentoa11 top 似乎在列表中，这消除了我对 top 不能用于转换的怀疑。
@php_nub_qq 检查 adaneo 的答案和我对它的评论，从外观上看，您需要先设置一个 top 值（例如设置为 0），然后再更改它（设置为 200 或随便）

标签： javascript css css-transitions

【解决方案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' */

之所以需要这样做是因为您无法从关键字和the default value for top is auto 转换。

对于performance reasons，同时使用specify exactly what you want to transition（仅top 而不是all）也是一种很好的做法，因此您不会无意中转换其他内容（例如color）。

【讨论】：

或transition: top 1s ease 0s; 仅限top
注意：这是因为默认的最高值是autodeveloper.mozilla.org/en-US/docs/Web/CSS/top
好点！我已经充实了答案，因为 8 年后它仍然受到关注:)

【解决方案2】：

我今天遇到了这个问题。这是我的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);
  }
}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

是否存在不是“过渡”的属性？

回答：是的。

如果属性未列出here，则它不是'transitional'。

参考：Animatable CSS Properties

【讨论】：

【解决方案5】：

在我的情况下 div 位置是固定的，添加左侧位置是不够的，它只有在添加显示块后才开始工作

left:0; display:block;

【讨论】：

【解决方案6】：

也许您需要在您的 css 规则集中指定一个最高值，以便它知道动画来自的值。

【讨论】：