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不做任何事情”字面意思是它不对该元素应用样式。我并不是说元素不会移动。

校正：

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

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属性的转换设置了阶段。它不会触发转换。可以通过使用left实际更改项目上的class="element"属性来触发转换。对left值的更改可以通过以下方式完成：

在项目或父项目中添加一个类，导致不同的left值从CSS规则生效。
触发伪类生效（如:hover）
使用javascript以编程方式更改.left的值。

在此特定示例中，seen类被添加到对象中，导致左值从-100%更改为0。由于transition left 1s已定义，因此浏览器将在1秒的持续时间内从当前-100%值转换为新的0值，因此对象将滑入到位。

Answer 2

var delay = "500ms",
    test  = $("#test");

test.css({
    'transition': 'all ' + delay,
    '-moz-transition': 'all ' + delay,
    '-webkit-transition': 'all ' + delay,
    '-o-transition': 'all ' + delay
}).on('click', function () {
    $(this).css({ left : '+=100' });
});

http://jsfiddle.net/YwfjF/

您可以看到它有效，但您必须更改属性才能使其生动。

以下是CSS3过渡的一个很好的参考：https://developer.mozilla.org/en/CSS/transition（注意底部描述过渡声明不同部分的链接）。

Answer 3

第1步：为转换定义一个css类：

.CustomTransitionClass{
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;}

第2步：添加课程：

 $("#test").addClass('CustomTransitionClass');

$ .css（'transition'，'value'）不起作用

3 个答案: