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

Posted 2023-03-06

技术标签:

【中文标题】CSS 过渡不适用于上、下、左、右【英文标题】：CSS Transition doesn't work with top, bottom, left, right 【发布时间】：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 或随便） 【参考方案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】：