CSS transition-duration не обновляет переход?

Question

В настоящее время я пишу плагин jQuery для создания / управления переходами CSS, и я обнаружил это странное поведение с длительностью перехода.

Очевидно, что во время выполнения перехода любые изменения в свойстве duration игнорируются, если только для переходных свойств не будет присвоено другое значение.Сама длительность не приводит к изменению перехода.

Ниже приведен код, показывающий пример этого, а ниже приведены некоторые ссылки на jsFiddle, чтобы дать вам лучшее представление о поведении перехода, которого я пытаюсь достичь..

    /* 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: http://jsfiddle.net/danro/Kd58j/

• jsFiddle 2 - желаемый эффект с jQuery: http://jsfiddle.net/danro/xPwc4/

Любые идеи о том, как заставить переход принять обновленную продолжительность?

ОБНОВЛЕНИЕ

Похоже, это поведение определено в спецификации,но я все еще открыт для обходного пути, если у кого-то есть такой.

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

После переходасвойство запущено, оно должно продолжать работать на основе исходной функции синхронизации, длительности и задержки, даже если свойство 'transition-timer-function', 'transition-duration' или 'transition-delay' изменяется до завершения перехода.

Answer 1

Я столкнулся с той же проблемой, когда мне нужно было перезаписать transition-duration , но оставил transition-property без изменений.Единственный простой обходной путь, который я нашел до сих пор, заключается в том, чтобы на самом деле немного изменить свойство перехода, то есть вместо opacity: 0 сделать его opacity: 0.0001.

Answer 2

только что протестировал вашу первую ссылку с Chrome и Safari, и она отлично работает, как в примере с jQuery:)