Question

我已经为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？

Answer 1

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

请参阅规范的默认设置：here

更改高度时激活了translateX上的CSS过渡

1 个答案: