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

我只是tried它，它对我有用。所以我所说的完全是wrong。

所以我的猜测是你的CSS不适用于画布，由于选择器中的错误。

你可以分享你的HTML吗？

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

<德尔> 当您通过不同的样式更改“width”和“height”时，Transitions会起作用。在示例中：您可能对`：hover`或`：active`有不同的样式规则。然后当您悬停时将发生转换，并在您停止时转换回正常状态。但不能直接应用宽度和宽度DOM元素的高度属性。这将立即启动变革。是什么让HTML改变？也许你可以将不同的类应用于元素而不是将更改硬编码到DOM中？这样你就可以从过渡中受益。另外，你的CSS规则覆盖了这种“硬编码”尺寸，你可以在[小提琴]（http://jsfiddle.net/avrahamcool/kYRnG/）中看到200px占用了100.所以即使在DOM改变之后，也没有任何影响，因为CSS规则仍然覆盖它。

Answer 2

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

长'回答'：我认为有几点需要注意：

更改height标记的width或canvas属性将完全清除它（即删除任何绘制到它的内容，将其重置为空白平板）。（虽然显然，在某些浏览器中不会发生这种情况。）
对于<canvas>元素，height或width属性与height和width的CSS属性具有唯一关系，我在此处描述： https://stackoverflow.com/a/19079320/1937302
对height或width属性的更改不会'过渡'/动画
对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);

CSS3 Transitions不适用于canvas元素的宽度和高度

2 个答案: