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

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。

css - -webkit-appearance强制转换?-LMLPHP

为什么input的行为与div不同?是否是因为输入具有默认的-webkit-appearance,从而在其之间进行了转换?

最佳答案

div的默认宽度/高度是自动的,因此不会设置动画。
input具有默认的宽度/高度,因此会设置动画。

顺便说一句,过渡效果仅适用于div,尽管仅可以设置其颜色的动画,因为可以将一种颜色从transparent更改为blue
您还应该考虑而不是,将alltransition一起使用,因为它可能会产生意想不到的结果,因为这样的事实,即浏览器确实将元素上的某些值设置为默认值,其中某些值可以设置动画,而有些则不能。

因此,在您的情况下,如果您打算设置宽度/高度的动画,则将其设置为:transiton: width 2s ease, height 2s ease;

关于css - -webkit-appearance强制转换?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39987487/

10-11 20:27
查看更多