1

我将 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;
}

但是在浏览器中任何时候都不会发生转换。你能帮我解决这个问题吗？谢谢

4

2 回答 2

2

我刚试过，它对我有用。所以我说的完全是wrong。

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

你能分享你的HTML吗？

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

当您通过不同的样式更改 `width` 和 `height` 时，过渡会起作用。例如：你可能对 `:hover` 或 `:active` 有不同的样式规则。然后当你悬停时会发生过渡，当你停止时会恢复正常。但不是通过将直接宽度和高度属性应用于 DOM 元素。这将立即开始改变。是什么让 HTML 发生了变化？也许您可以将不同的类应用于元素，而不是将更改硬编码到 DOM 中？这样你就会从过渡中受益。此外，您的 CSS 规则覆盖了这种“硬编码”尺寸，您可以在 [Fiddle](http://jsfiddle.net/avrahamcool/kYRnG/) 中看到 200px 超过了 100。所以即使在 DOM 之后更改，它不会影响，因为 CSS 规则仍然覆盖它。
于 2013-09-29T14:10:55.683 回答
1

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

长“答案”：我认为有几点需要注意：

  1. 更改标签的heightorwidth属性canvas将完全清除它（即删除任何绘制到它的东西，将其重置为空白状态）。（虽然显然，这在某些浏览器中不会发生。）
  2. 对于<canvas>元素，heightor属性与andwidth的 CSS 属性有独特的关系，我在这里描述：https ://stackoverflow.com/a/19079320/1937302heightwidth
  3. 对heightorwidth属性的更改不会被“过渡”/动画化
  4. 对 CSS属性height或width属性的更改将被“过渡”/动画化

我在这里演示了一些：

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);
于 2013-09-29T15:10:19.343 回答