1

私は開発目的でfirefox 24.0を使用しています。

コードにこの要素があります

一意のID

.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) サポートが向上します

トランジションは、さまざまなスタイルで「幅」と「高さ」を変更すると機能します。例: `:hover` または `:active` に対して異なるスタイル ルールを使用することができます。ホバーすると遷移が発生し、停止すると通常に戻ります。ただし、幅と高さの属性をDOM要素に直接適用することはできません。それはすぐに変化をもたらします。HTMLを変更する原因は何ですか? 変更を DOM にハードコーディングする代わりに、別のクラスを要素に適用できるのではないでしょうか? そうすれば、移行の恩恵を受けることができます。また、あなたの CSS ルールはこの「ハードコードされた」サイズを上書きします。その [Fiddle](http://jsfiddle.net/avrahamcool/kYRnG/) で、200px が 100px を超えていることがわかります。変更しても、CSS ルールが引き続きそれをオーバーライドするため、影響はありません。
于 2013-09-29T14:10:55.683 に答える
1

簡単な答え: CSS セレクターで canvas 要素を適切にターゲットにしていない可能性があります。

長い「答え」: 注意すべき点がいくつかあると思います。

  1. heightタグのまたはwidth属性を変更すると、canvas完全に消去されます (つまり、タグに描画されたものはすべて削除され、白紙の状態にリセットされます)。(どうやら、これは一部のブラウザーでは発生しません。)
  2. <canvas>要素の場合、またはheight属性はおよびwidthの CSS プロパティと一意の関係を持ちます。heightwidth
  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);
于 2013-09-29T15:10:19.343 に答える