CSS transition-duration不会更新转换？

Question

I am currently writing a jQuery plugin to create / manage CSS transitions, and I found this strange behavior with transition-duration.

Apparently, while a transition is running, any changes to the duration property are ignored unless the properties being transitioned receive a different value. The duration itself does not cause the transition to change.

Following is some code which shows an example of this, and below are some links to jsFiddle to give you a better idea of the transition behavior I am trying to achieve.

    /* starting transition */
    .t1 {
        -webkit-transition-duration: 5s;
        -webkit-transition-property: width;
        width: 500px;
    }

    /* during the above, this will do nothing */
    .t2 {
        -webkit-transition-duration: 200ms;
        -webkit-transition-property: width;
        width: 500px;
    }

    /* but this will override the transition as expected */
    .t3 {
        -webkit-transition-duration: 200ms;
        -webkit-transition-property: width;
        width: 501px; /* 1 pixel added */
    }

• jsFiddle 1 - CSS duration problem: http://jsfiddle.net/danro/Kd58j/

• jsFiddle 2 - Desired effect w/ jQuery: http://jsfiddle.net/danro/xPwc4/

Any ideas on how to force the transition to accept the updated duration?

UPDATE

It looks like this behavior is defined in the spec, but I am still open to a workaround if anyone has one.

(From www.w3.org/TR/css3-transitions/#starting)

Once the transition of a property has started, it must continue running based on the original timing function, duration, and delay, even if the 'transition-timing-function', 'transition-duration', or 'transition-delay' property changes before the transition is complete.

Answer 1

I've run into the same issue when I needed to overwrite transition-duration but leaving the transition-property intact. The only simple workaround I've found so far is to actually change transition-property a little bit, ie instead of opacity: 0 make it opacity: 0.0001 .

Answer 2

刚测试了Chrome和Safari的第一个链接，它运行正常，就像jQuery示例:)