CSS3 过渡不适用于画布元素的宽度和高度

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)它有更好的支持

当您通过不同的样式更改"宽度"和"高度"时，过渡有效。例如：您可能对"：悬停"或"：活动"有不同的样式规则。然后，当您悬停时，过渡将发生，当您停止时，过渡将恢复正常。但不是通过将直接宽度和高度属性应用于 DOM 元素。这将立即启动更改。是什么使 HTML 发生变化？也许您可以将不同的类应用于元素，而不是将更改硬编码到 DOM 中？这样，您将从过渡中受益。此外，您的 CSS 规则会覆盖此"硬编码"大小，你可以在[Fiddle](http://jsfiddle.net/avrahamcool/kYRnG/(中看到200px被100px取代了。所以即使在 DOM 更改后，它也不会产生任何影响，因为 CSS 规则仍然会覆盖它。

Answer 2

简短的回答：您可能没有使用 CSS 选择器正确定位画布元素。

长"答案"：我认为有几件事需要注意：

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