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中设置默认值（让它知道你想要从哪里开始）

CSS

position: relative;
transition: all 2s ease 0s;
top: 0; /* start out at position 0 */

Answer 2

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

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

Answer 4

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

Answer 5

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

left:0; display:block;

Answer 6

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

答案：是。

如果未列出该属性here，则它不是“过渡性” 。

参考：Animatable CSS Properties

CSS Transition不适用于top，bottom，left，right

6 个答案:

CSS