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

Question

I'm trying to apply css3 transition on the fly, but jquery doesn't do anything.

code

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

i also tried

var delay = "500ms";

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

What's wrong with my code?

Updated:

"jquery doesn't do anything" literally means that it doesn't apply style to the element. I don't mean that the element doesn't move.

Correction:

it actually works...it was my browser.

Answer 1

I don't think you understand how CSS3 transitions work. The CSS3 transition settings control how property changes to an object are handled and whether they take immediate effect or whether they trigger a transition so it transtions to the new value over time.

You must have an actual property change to have a transition. Setting the transition value itself does not trigger a transition - it just sets up the rules for when a transition will occur in the future.

In your example, you'd have to actually change some value to see a change. For example:

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

Since you have transition: all , that would trigger a transition from the current height value to the new height value.

For example, here's a CSS3 transition I created for another question a couple days ago: http://jsfiddle.net/jfriend00/P2H4Z/ .

In that example, there is this CSS relevant to the transition:

.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;
}

This sets the stage for a transition of the left property. It does not trigger a transition. The transition can be triggered by actually making a change to the left property on the item with class="element" . That change to the left value can be done by:

1. Adding a class to the item or a parent item which causes a different left value to take effect from the CSS rules.
2. Triggering a pseudo class to take effect (like :hover )
3. Programmatically changing the value of .left with javascript.

In this particular example, the seen class is added to the object which causes the left value to change from -100% to 0 . Because transition left 1s is defined, the browser will transition from the current -100% value to the new 0 value over a duration of 1s and thus the object will slide into place.

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/

You can see that it works, but you have to change a property for it to be animated.

Here is a great reference for CSS3 transitions: https://developer.mozilla.org/en/CSS/transition (notice the links at the bottom that describe the different parts of the transition declaration).

Answer 3

Step 1: define a css class for transitions:

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

Step 2: add the class:

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