css переход на translateX активируется при изменении высоты - PullRequest
Новая
       31

css переход на translateX активируется при изменении высоты

0 голосов
/ 03 июля 2018

Я создал элемент (используется в качестве заголовка) и свойство перехода для этого элемента для TranslateX (). Переход активируется, когда я изменяю высоту элемента. Вот кодовая ручка для сценария: Переход на 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 меняется, когда я изменяю высоту элемента. Является ли источник трансформации активирующим translateX?

1 Ответ

0 голосов
/ 03 июля 2018

Прежде всего: transition: translateX() 0; является недопустимым значением свойства и не имеет никакого эффекта - оно игнорируется браузером из-за неправильного синтаксиса. Однако вы устанавливаете явный transition-duration: 1s без каких-либо других параметров, поэтому браузер устанавливает параметры по умолчанию для каждого другого свойства перехода, и, таким образом, вы получаете что-то вроде transition: all 1s ease 0s под капотом. Таким образом, в результате переход применяется к height. Никакой магии, просто инструменты для разработки.

См. Значения по умолчанию в спецификации: здесь

...