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 规则集中指定一个最高值，以便它知道要对哪个值进行动画处理 from。

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

）不（但在 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>

Answer 5

是否有非“过渡性”的属性？

答案：是的。

如果该房产未在此处列出，则它不是“过渡性”。

参考：可动画化的 CSS 属性

Answer 6

动画时的幕后 -> 现代网络浏览器通过使用硬件加速来大力优化动画和过渡。这意味着动画和过渡通常会委托给 GPU（图形处理单元）以实现更流畅的渲染。

关注 -> 您应该避免使用具有 left/top/right/bottom 属性的转换。它可能会导致动画闪烁/缓慢或卡顿。

为什么 - 这些不会创建流畅的动画，因为它们每次都会让浏览器创建布局，这将影响它们的所有子级。它通常会触发整个页面的“回流”和“重绘”。此外，它们并不总是硬件加速，导致动画速度变慢且不太流畅。

解决方案 - 在制作动画时使用具有变换和不透明度等属性的 CSS 过渡和动画，因为它们对流程没有影响并且更加平滑。在大多数情况下它们是硬件加速的。

专业提示 -> 探索将会改变

will-change CSS 属性用于向浏览器提供有关哪些属性将来可能会更改和动画的提示。此提示允许浏览器优化这些属性的渲染，从而获得更好的动画性能。

如何 -> 在许多情况下，当您将 will-change 应用于某个元素时，浏览器会将该元素提升到其自己的 GPU 加速层。这意味着元素和指定的属性与页面的其余部分分开渲染，这可以提高渲染性能。

警告：will-change 旨在作为最后手段使用，以便尝试处理现有的性能问题。它不应该被用来预测性能问题。