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


91

我有风格的元素

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,它是另一个库。该代码似乎按预期工作,添加了样式,但是过渡仅在第二种情况下有效?


2
假设$$是jQuery的别名,则执行[0]将返回本机dom对象(与jquery对象相对),并且没有任何.on()方法。如果不是,什么是$$?
xec 2013年

没有一个是有效的,如果您使用的是jQuery,则没有任何样式(),在本机JS中,它肯定不能那样工作。
adeneo 2013年

1
有一组可转换的规则。参见W3规范
Goldentoa11,2013年

@ Goldentoa11 top似乎在列表中,这消除了我对top无法进行过渡的疑问。
php_nub_qq 2013年

3
@php_nub_qq检查adaneo的答案和我对此的评论,从外观上,您需要top先将其设置为某个值(例如,设置为0),然后再将其更改(设置为200或其他值)
xec

Answers:


188

尝试在CSS中设置默认值(让它知道您要从哪里开始)

的CSS

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

9
transition: top 1s ease 0s;top唯一
奥列格Abrazhaev

16

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


2

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

left:0; display:block;


2

与OP无关的某些东西,但将来可能与其他人无关:

对于像素(px)中,如果值是“0”时,该单元可以被省略:right: 0right: 0px两者的工作。

但是我注意到,在Firefox和Chrome 中,秒单位()并非如此s。虽然transition: right 1s ease 0s作品,transition: right 1s ease 0(失踪单元s的最后的值transition-delay)不(它确实工作边不过)。

在下面的例子中,你会发现right作品既0px0,但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>



0

我今天遇到了这个问题。这是我的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);
  }
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.