translateX 上的 css 过渡在高度变化时激活答案

【问题标题】：css transition on translateX activated on height changetranslateX 上的 css 过渡在高度变化时激活
【发布时间】：2018-12-12 03:08:56
【问题描述】：

我为 TranslateX() 创建了一个元素（用作标题）和该元素的转换属性。当我改变元素的高度时，过渡被激活。这是该场景的codePen： Transition on translateX

CSS

.header {
  position: fixed;
  top: 0;
  height: 100px;
  background-color: black;
  transition: translateX() 0;
  transition-duration: 1s;
  width: 100%;
}

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？

【问题讨论】：

您只能为每个属性设置转换，尽管它有很多方法/可能性，但它仍然是一个属性。对变换属性进行的任何旋转、平移、缩放等都将服从过渡

标签： css transform transition

【解决方案1】：

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

查看规范中的默认值：here

【讨论】：