CSS3 Переходы, не работающие по ширине и высоте элемента холста

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)имеет лучшую поддержку

Transitions работает при изменении `` width` и height` через различные стилизации. в примере: у вас может быть другое правило стили для `: hover` или`: active`. , тогда переход произойдет, когда вы наведете курсор, и когда вы остановитесь, вы вернетесь к норме. , но не применяя атрибуты прямой ширины и высоты к элементу DOM. , который сразу же начнет меняться. Что делает HTML для изменения? возможно, вы можете применить к элементу другой класс вместо жесткого кодирования изменений в DOM? таким образом вы выиграете от перехода. также, ваше правило CSS переопределяет эти «жестко закодированные» размеры, вы можете видеть в этом [Fiddle] (http://jsfiddle.net/avrahamcool/kYRnG/), что 200px берется за 100. так что даже после изменения DOM это не влияет, потому что правило CSS все еще отменяет его.

Answer 2

Короткий ответ: вы, вероятно, не нацеливаете элемент холста должным образом на свой селектор CSS.

Long «ответ»: Я думаю, что есть несколько вещей, чтобы отметить:

1. Изменение height или width атрибуты canvas тега завершат очистить его (т.е. удалить все обращается к нему, сбрасывая его чистый лист). (Хотя, видимо, этого не происходит в некоторых браузерах.)
2. Для <canvas> элементов, в height или width атрибуты имеют уникальные отношения с свойствами CSS в height и width, которые я описываю здесь: https://stackoverflow.com/a/19079320/1937302
3. Изменения в height или width атрибуты не будет «переход»/анимированный
4. изменения в CSS properities из 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);