jquery - $.css ('transition' ,'value' ) 不起作用

Question

我正在尝试动态应用 css3 转换，但 jquery 没有做任何事情。

代码

var test = $("#test");
test.css("transition","all 500ms");

我也试过

var delay = "500ms";

test.css({
    'transition': 'all ' + delay,
    '-moz-transition': 'all ' + delay,
    '-webkit-transition': 'all ' + delay,
    '-o-transition': 'all ' + delay
});

我的代码有什么问题？

更新:

“jquery doesn't do anything”字面意思是它不对元素应用样式。我并不是说元素不会移动。

更正:

它确实有效...它是我的浏览器。

Answer 1

我认为您不了解 CSS3 过渡的工作原理。 CSS3 过渡设置控制如何处理对象的属性更改，以及它们是立即生效还是触发过渡以便随着时间的推移过渡到新值。

您必须更改实际属性才能进行转换。设置转换值本身不会触发转换 - 它只是为将来何时发生转换设置规则。

在您的示例中，您必须实际更改一些值才能看到更改。例如:

test.css("height", "100px");

因为您有 transition: all，这将触发从当前高度值到新高度值的转换。

例如，这是我几天前为另一个问题创建的 CSS3 转换:http://jsfiddle.net/jfriend00/P2H4Z/ .

在那个例子中，有这个 CSS 与转换相关:

.element
{
    background: blue;
    position: absolute;
    left: -100%;
    padding: 0 10px;

    -moz-transition: left 1s; 
    -webkit-transition: left 1s; 
    -o-transition: left 1s; 
    -ms-transition: left 1s; 
     transition: left 1s; 
}


.element.seen {
    left: 0;
}

这为 left 属性的转换奠定了基础。它不会触发转换。可以通过实际更改带有 class="element" 的元素的 left 属性来触发转换。 left 值的更改可以通过以下方式完成:

1. 向项或父项添加类，这会导致不同的 left 值根据 CSS 规则生效。
2. 触发伪类生效(如:hover)
3. 使用 javascript 以编程方式更改 .left 的值。

在这个特定的例子中，seen 类被添加到导致左值从 -100% 变为 0 的对象.因为 transition left 1s 被定义，浏览器将在 1s 的持续时间内从当前的 -100% 值转换到新的 0 值，并且因此物体将滑入到位。