css translateX 上的转换在高度变化时激活

Question

我在该元素上为 TranslateX() 创建了一个元素（用作 header）和一个过渡属性。当我更改元素的高度时，过渡被激活。这是该场景的 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;

}

为什么在高度变化时激活转换？

我看到当我改变元素的高度时 transform-origin 的值也在改变。 transform-origin 是否正在激活 translateX？

Answer 1

首先：transition: translateX() 0; 是无效的属性值并且完全没有效果 - 由于语法错误，它会被浏览器忽略。但是，您在没有任何其他参数的情况下设置显式 transition-duration: 1s，因此浏览器会为每个其他转换属性设置默认参数，因此您会得到类似 transition: all 1s ease 0s 的内容。因此，结果转换应用于 height。没有魔法，只有开发工具。

查看规范中的默认值：here

css translateX 上的转换在高度变化时激活

css transition on translateX activated on height change

css

transition

transform