CSS transition-duration沒有更新轉換？

我目前正在編寫一個jQuery插件來創建/管理CSS轉換，我發現這種奇怪的行爲與轉換時間。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/

如何迫使過渡任何想法接受更新的時間？

UPDATE

它看起來像這種行爲是在規範中定義的，但我還是開到一個解決辦法，如果任何人有一個。

（從www.w3.org/TR/css3-transitions/#starting）

一旦財產的過渡已經開始，它必須繼續在原有基礎上定時功能，時間運行，並且延遲，即使在轉換完成之前「轉換定時功能」，「轉換持續時間」或「轉換延遲」屬性發生了變化。

來源

2011-05-18 danro

可能只是一個webkit的bug – ariel 2011-05-18 06:01:21

只是測試你的第一個鏈接與Chrome和Safari瀏覽器，它工作正常，就像jQuery的例子:)

來源

2011-05-18 07:02:12 inadcod

對我來說也工作得很好。 – anothershrubery 2011-05-18 08:14:37

只需確認一下，它就是被忽略的CSS示例中的第二次點擊。 – danro 2011-05-19 02:55:02

，當我需要覆蓋過渡期間我碰到了同樣的問題但將轉換屬性保持不變。唯一的簡單解決方法我迄今爲止發現的是實際上改變轉換屬性的一點點，即，而不是opacity: 0使它opacity: 0.0001。

來源

2015-10-09 14:09:36 Everyone

CSS transition-duration沒有更新轉換？

回答

相關問題