Блог

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

По-видимому, во время выполнения перехода любые изменения в свойстве 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-timing-function’, ‘transition-duration’ или ‘transition-delay’ изменяется до завершения перехода.

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

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