给定基本的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。
为什么
input
的行为与div
不同?是否是因为输入具有默认的-webkit-appearance
,从而在其之间进行了转换? 最佳答案
div
的默认宽度/高度是自动的,因此不会设置动画。input
具有默认的宽度/高度,因此会设置动画。
顺便说一句,过渡效果仅适用于div
,尽管仅可以设置其颜色的动画,因为可以将一种颜色从transparent
更改为blue
您还应该考虑而不是,将all
与transition
一起使用,因为它可能会产生意想不到的结果,因为这样的事实,即浏览器确实将元素上的某些值设置为默认值,其中某些值可以设置动画,而有些则不能。
因此,在您的情况下,如果您打算设置宽度/高度的动画,则将其设置为:transiton: width 2s ease, height 2s ease;
关于css - -webkit-appearance强制转换?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39987487/