[英]CSS3 Transitions not working on width and height of canvas element
I use firefox 24.0 for development purpose. 我使用firefox 24.0进行开发。
i have this element in my code 我的代码中有这个元素
Unique Id 唯一身份
.t_Bubble > canvas:nth-child(1)
External HTML content 外部HTML内容
<canvas style="width: 50px; height: 73px;" height="73" width="50"></canvas>
it later changes to this HTML content in later part of code. 它稍后会在代码的后半部分更改为此HTML内容。
<canvas style="width: 114px; height: 62px;" height="62" width="114"></canvas>
i have applied this css on this element 我已经在这个元素上应用了这个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;
}
But no transition happens anytime in browser. 但是在浏览器中不会发生任何转换。 Can you help me with this? 你能帮帮我吗? Thank you 谢谢
I just tried it, and it worked for me. 我刚尝试过 ,它对我有用。 So what I said is totally wrong
. 所以我说的完全wrong
。
So my guess will be that your CSS don't apply to the canvas, Due to an error in the selector. 所以我的猜测是你的CSS不适用于画布,由于选择器中的错误。
can you share your HTML? 你可以分享你的HTML吗?
also, use :first-child
instead of :nth-child(1)
it has better support 另外,使用:first-child
而不是:nth-child(1)
它有更好的支持
Short answer: you're probably not targeting the canvas element properly with your CSS selector. 简短回答:您可能没有使用CSS选择器正确定位canvas元素。
Long 'answer': I think there's a couple of things to note: 长'回答':我认为有几点需要注意:
height
or width
attributes of the canvas
tag will complete clear it (ie remove anything drawn to it, resetting it to a blank slate). 更改canvas
标记的height
或width
属性将完全清除它(即删除任何绘制到它的内容,将其重置为空白平板)。 (Although apparently, this doesn't happen in some browsers.) (虽然显然,在某些浏览器中不会发生这种情况。) <canvas>
elements, the height
or width
attributes have a unique relationship with the CSS properties of height
and width
, which I describe here: https://stackoverflow.com/a/19079320/1937302 对于<canvas>
元素, height
或width
属性与height
和width
的CSS属性有唯一的关系,我在这里描述: https : //stackoverflow.com/a/19079320/1937302 height
or width
attributes will not be 'transitioned'/animated 对height
或width
属性的更改将不会 “转换”/动画 height
or width
attributes will be 'transitioned'/animated 对height
或width
属性的CSS特性的更改将被 “转换”/动画化 I've demoed some of this here: 我在这里演示了一些:
http://jsfiddle.net/BYossarian/WWtGZ/3/ http://jsfiddle.net/BYossarian/WWtGZ/3/
HTML: HTML:
<canvas id="canvas1" height="50" width="100"></canvas>
CSS: CSS:
canvas {
border: 1px solid black;
transition: all 1s ease;
height: 50px;
}
JS: 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.