Html CSS3转换不适用于画布元素的宽度和高度

我使用Firefox24.0进行开发

我的代码中有这个元素

唯一Id

.t_Bubble > canvas:nth-child(1)

外部HTML内容

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

但在浏览器中任何时候都不会发生转换。你能帮我吗？ 谢谢你

我就是这么做的，而且它对我很有效。所以我说的完全是错误的

因此，我的猜测是，由于选择器中的错误，您的CSS不会应用于画布

你能分享你的HTML吗

另外，使用

：first child

代替

：nth child（1）

它有更好的支持

当您通过不同的样式更改“宽度”和“高度”时，过渡会起作用。 例如：对于“：hover”或“：active”，您可能有不同的样式规则。 然后，在您悬停时将发生转换，在您停止时将转换回正常状态。 但不是通过对DOM元素应用直接的宽度和高度属性。 这将立即带来变化。 是什么让HTML改变？也许您可以对元素应用不同的类，而不是将更改硬编码到DOM中？这样，您将从过渡中受益。 此外，CSS规则覆盖了这种“硬编码”大小， 你可以从那把小提琴中看出(http://jsfiddle.net/avrahamcool/kYRnG/)200px被100所取代。因此，即使在DOM更改之后，它也不会产生任何影响，因为CSS规则仍然会覆盖它。

---

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

长长的“答案”：我想有几件事需要注意：

更改

画布

标记的

高度

或

宽度

属性将完成对其的清除（即删除绘制到它的任何内容，将其重置为空白板）。（虽然很明显，这在某些浏览器中不会发生。）

对于

元素，

高度

或

宽度

属性与

高度

和

宽度

的CSS属性具有独特的关系，我在这里描述了这两个属性：

对

高度

或

宽度

属性的更改将不会“转换”/动画化

对

高度

或

宽度

属性的CSS属性的更改将被转换/动画化

我在这里演示了其中一些：

HTML:

JS:

---

@BoltClock不是通过样式，而是在元素属性中硬编码的。糟糕，我现在看到代码既包括

样式

又包括

宽度

/

高度

属性。@avrahamcool hi，实际上是用于工具提示的jquery插件之一。老实说，我不知道里面发生了什么。我应该使用传统的javascript代码来实现这一功能吗？我认为最好知道您使用的是什么。尤其是如果它不能给你想要的东西。如果你能实现同样的目标。。这对你来说可能是一个更好的解决方案。我也在使用Firefox24，它工作得很好。你能补充一下吗？

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

.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;
}

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

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

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