6

给定一个基本的 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 的高度/宽度，但复选框在 2 秒内从 0px 增长到 100px 的高度/宽度。

在此处输入图像描述

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

4

4 回答 4

2

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

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

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

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

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

于 2016-10-14T15:28:47.173 回答
1

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

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

重要提示
如果您希望转换工作，它必须有一个设置、起始、默认值和结束值。动画将发生在这两个值之间。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>

于 2016-10-14T15:31:27.687 回答
0

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

于 2016-10-14T15:41:00.727 回答
0

简短的回答，无需技术。当有一个先前的状态开始动画时，CSS 过渡将完成它的工作。

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

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

没关系，另外两个答案比我快。

于 2016-10-14T15:37:25.417 回答