Question

鉴于基本的HTML模板和CSS样式，我发现两种不同的元素反应完全不同。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

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

Answer 1

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

input有一个默认的宽度/高度，因此会设置动画。

作为旁注，过渡确实适用于div，但只为其颜色设置动画，因为可以将颜色从transparent设置为blue < / em>的

您还应该考虑不将all与transition一起使用，因为它可以提供不可预测的结果，因为浏览器会在元素上设置一些值默认值，其中一些可以动画，一些可以＃。

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

Answer 2

答案很简单。 input的样式在DOM中有预加载的值，这就是为什么在文档中出现之后，平滑地改变其形状。

与div元素完全相反。在用户设置之前，div没有在DOM中预先加载任何预加载的默认值。这就是它出现在已设置大小的文档中的原因。

重要提示
如果您希望转换工作，则必须具有设置，开始，默认值和结束值。动画将在这两个值之间发生。 input已经设置了大小的默认值，这就是动画发生的原因。

您可能会问，为什么background过渡有效？它有效，因为background的默认值是透明。

＆＃13;

setTimeout(function() {
  $('.xx').addClass('x');
}, 500);

＆＃13;

* {
  margin: 0;
  padding: 0;
  border: 0;
}
input[type="checkbox"] {} div {} .x {
  width: 100px;
  height: 100px;
  transition: all 2s ease;
  background: blue;
}
.container {
  display: flex;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>

  <input type='checkbox'>
  <div class='xx'></div>
  <input class='xx' type="checkbox">

</div>

＆＃13;

Answer 3

简短的回答，而不是技术。当有一个先前的状态开始动画时，CSS转换会完成它的工作。

默认情况下，默认div没有任何样式。 input元素始终在浏览器中预先设置样式。

这是一个小提琴，可用于重新创建OP提到的行为。它通过简单的JS延迟模拟外部加载。 https://jsfiddle.net/xvt359ju/1/

没关系，其他2个答案比我快。

Answer 4

浏览器有自己的基本CSS样式元素，复选框也有它。检查元素时，您可以看到浏览器应用的复选框的宽度和高度，当外部样式表加载时，将覆盖该元素。并且当你转换它时动画它。

-webkit-appearance强制转换？

4 个答案: