在高度更改时激活的translateX上的css过渡
在高度更改时激活的translateX上的css过渡
提问于 2018-07-04 02:14:41
我在这个元素上为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？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-04 03:48:10
首先：transition: translateX() 0;是无效的属性值，没有任何作用--由于语法错误，浏览器会忽略它。但是，您设置的是没有任何其他参数的显式transition-duration: 1s，因此browser会为每个其他转换属性设置默认参数，因此您会得到一些类似于transition: all 1s ease 0s的东西。因此，结果是将转换应用于height。没有魔法，只有开发工具。
请参阅规范中的默认值：here
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51160731
复制相关文章
相似问题
腾讯云开发者
