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);