-webkit-appearance强制转换？

Question

给定一个基本的HTML模板和CSS样式,我看到两个不同的元素反应完全不同.

setTimeout(function() {
  document.body.id = 'animate';
}, 100);

#animate input[type="checkbox"]{
  width: 100px;
  height: 100px;
  transition: 2s all;
  -moz-appearance: none;
}
#animate div{
  width: 100px;
  height: 100px;
  background:blue;
  transition: 2s all;
}

<input type="checkbox"/>
<div></div>

如果你在浏览器中打开它,你会看到,在加载时,div已经有100px高度/宽度,但复选框从0px增加到100px高度/宽度超过2s.

为什么input表现与div？不同？是因为输入有默认值,-webkit-appearance可以在它之间进行转换吗？

Answer 1

的div默认宽度/高度是自动的，因此它不会动画。

它input有一个默认的宽度/高度，因此会产生动画。

附带说明一下，过渡确实适用于div，但仅对其颜色进行动画处理，因为可以将颜色从transparent到进行动画处理blue

您还应该考虑不使用allwith transition，因为它可能会给出不可预测的结果，因为浏览器确实将元素上的某些值设置为默认值，其中有些可以动画，有些则不能。

因此，在您的情况下，如果您的目的是设置宽度/高度的动画，请按如下方式设置：transiton: width 2s ease, height 2s ease;