我在这个元素上为TranslateX()创建了一个元素(用作头部)和一个转换属性。当我更改元素的高度时,转换将被激活。以下是该场景的codePen:Transition on translateX
CSS
.header {
position: fixed;
top: 0;
height: 100px;
background-color: black;
transition: translateX() 0;
transition-duration: 1s;
width: 100%;
}
JS
function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.querySelector(".header").style.height = "100px";
} else {
document.querySelector(".header").style.height = "50px";
}
prevScrollpos = currentScrollPos;
}
为什么在高度更改时激活转换?
我看到当我改变元素的高度时,转换原点的值也在改变。转换原点是否激活了translateX?
发布于 2018-07-04 03:48:10
首先:transition: translateX() 0;
是无效的属性值,没有任何作用--由于语法错误,浏览器会忽略它。但是,您设置的是没有任何其他参数的显式transition-duration: 1s
,因此browser会为每个其他转换属性设置默认参数,因此您会得到一些类似于transition: all 1s ease 0s
的东西。因此,结果是将转换应用于height
。没有魔法,只有开发工具。
请参阅规范中的默认值:here
https://stackoverflow.com/questions/51160731
复制相似问题