CSS3 Transitions不適用於canvas元素的寬度和高度

Question

我使用firefox 24.0進行開發。

我的代碼中有這個元素

唯一身份

.t_Bubble > canvas:nth-child(1)

外部HTML內容

<canvas style="width: 50px; height: 73px;" height="73" width="50"></canvas>

它稍后會在代碼的后半部分更改為此HTML內容。

<canvas style="width: 114px; height: 62px;" height="62" width="114"></canvas>

我已經在這個元素上應用了這個css

.t_Bubble > canvas:nth-child(1){

transition: width 2s ease,height 2s linear;
-moz-transition:width 2s ease, height 2s linear;
-webkit-transition:width 2s ease, height 2s linear;
}

但是在瀏覽器中不會發生任何轉換。 你能幫幫我嗎？ 謝謝

Answer 1

我剛嘗試過 ，它對我有用。 所以我說的完全wrong 。

所以我的猜測是你的CSS不適用於畫布，由於選擇器中的錯誤。

你可以分享你的HTML嗎？

另外，使用:first-child而不是:nth-child(1) 它有更好的支持

當您通過不同的樣式更改“width”和“height”時，Transitions會起作用。 在示例中：您可能對`：hover`或`：active`有不同的樣式規則。 然后當您懸停時將發生轉換，並在您停止時轉換回正常狀態。 但不是通過將直接的width和height屬性應用於DOM元素。 這將立即啟動變革。 是什么讓HTML改變？ 也許你可以將不同的類應用於元素而不是將更改硬編碼到DOM中？ 這樣你就可以從過渡中受益。 此外，你的CSS規則覆蓋了這種“硬編碼”大小，你可以在[小提琴]（http://jsfiddle.net/avrahamcool/kYRnG/）中看到200px被取代了100.所以即使在DOM之后更改，它不會產生任何影響，因為CSS規則仍然會覆蓋它。

Answer 2

簡短回答：您可能沒有使用CSS選擇器正確定位canvas元素。

長'回答'：我認為有幾點需要注意：

1. 更改canvas標記的height或width屬性將完全清除它（即刪除任何繪制到它的內容，將其重置為空白平板）。 （雖然顯然，在某些瀏覽器中不會發生這種情況。）
2. 對於<canvas>元素， height或width屬性與height和width的CSS屬性有唯一的關系，我在這里描述： https ： //stackoverflow.com/a/19079320/1937302
3. 對height或width屬性的更改將不會 “轉換”/動畫
4. 對height或width屬性的CSS特性的更改將被 “轉換”/動畫化

我在這里演示了一些：

http://jsfiddle.net/BYossarian/WWtGZ/3/

HTML：

<canvas id="canvas1" height="50" width="100"></canvas>

CSS：

canvas {
    border: 1px solid black;
    transition: all 1s ease;
    height: 50px;
}

JS：

var canvas = document.getElementById('canvas1'),
    ctx = canvas.getContext('2d');

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

// changing width attribute clears canvas element (in most broswers)
// changing width attribute isn't animated by CSS transition
setTimeout(function () {
    canvas.width = "200";
}, 2000);

// changing CSS rule for width is animated, although if no CSS rule for width already exists, then a width of 0px is taken as the starting point
setTimeout(function () {
    ctx.fillStyle = "red";
    ctx.fillRect(10, 10, 30, 30);
    canvas.style.width = "100px";
}, 4000);