-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 height/width，但是复选框从 0px 增长到 100px height/width 2s.

为什么 input 的行为与 div 不同？是因为输入有默认的 -webkit-appearance 给它一些东西来转换吗？

Answer 1

div 的默认 width/height 是自动的，因此它不会动画。

input 具有默认值 width/height，因此会设置动画。

作为旁注，过渡确实适用于 div，但仅对其颜色进行动画处理，因为可以将颜色从 transparent 动画化为 blue

您还应该考虑不要将 all 与 transition 一起使用，因为它会产生不可预测的结果，因为这个事实浏览器确实将元素的某些值设置为默认值，其中一些可以设置动画，一些则不能。

因此，在您的情况下，如果您打算制作动画 width/height，请按如下方式设置：transiton: width 2s ease, height 2s ease;

Answer 2

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

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

重要提示
如果你想让转换工作，它必须有一个设置、开始、默认值和结束值。动画将发生在这两个值之间。 input已经设置了尺寸的默认值，所以会出现动画。

您可能会问，为什么 background 转换有效？它有效，因为 background 的默认值是 transparent。

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

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

<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>

Answer 3

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

默认 div 默认没有任何样式。 input 元素总是在浏览器本身中预先设置样式。

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

没关系，还有 2 个答案比我快。

Answer 4

浏览器有自己的基本 CSS 元素样式，复选框也有。当您检查元素时，您可以看到浏览器应用的复选框的宽度和高度，这将在加载外部样式表时被覆盖。并在您对其进行过渡时对其进行动画处理。

-webkit-appearance 强制转换？

-webkit-appearance forcing transitions?

css

css-transitions

webkit-appearance