Счетчик преобразования в CSS анимации - PullRequest
Новая
       48

Счетчик преобразования в CSS анимации

0 голосов
/ 08 июня 2018

В каком-то интерфейсе я хочу делать анимацию.Так как свойство transform гораздо более оптимизировано для этого, чем другие свойства CSS, я буду использовать это.

С transform: scale (): когда соотношение сторон элемента не изменяется, нет проблем.Когда соотношение должно измениться, решение, которое я нашел, это поместить контейнер, а в этот контейнер - внутренний.Затем примените противоположное преобразование к внутреннему блоку, чтобы соотношение сохранялось во время и после анимации.

Я сделал ручку, чтобы проверить идею, и она работает, но с проблемой во время анимации: внешний вид внутреннего блокарастягивается во время анимации.Я не понимаю почему, учитывая, что время анимации одинаковое, а замедление линейное.

https://codepen.io/AdamElio/pen/PabejP

(нажмите в меню, чтобы включить анимацию) 

document.querySelector('#menu').addEventListener('click', function() {
    this.classList.toggle('collapsedd')
});
#menu {
  margin: 30px;
  padding: 15px;
  background: white;
  width: 150px;
  overflow: hidden;
  transform-origin: top center;
  transition: transform .5s linear;
}

#menu.collapsedd {
  transform: scaleY(.2);
}

#menu .inner {
  transition: transform .5s linear;
  transform-origin: top center;
}

#menu.collapsedd .inner {
  transform: scaleY(5);
}

#menu .inner ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
<nav id="menu">
  <div class="inner">
    <h5>Menu</h5>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </div>
</nav>

<div id="transform"></div>

Ответы [ 2 ]

0 голосов
/ 29 марта 2019

Это происходит потому, что преобразование счетчика не совпадает во время перехода.Рассматривая ваш пример, контейнер перейдет от scaleY(0.2) до scaleY(1), а дочерний - от scaleY(5) до scaleY(1).

В конце и в начале перехода это будет работать, потому что контейнер и дочерние преобразования будут «отменены»:

  • начало: 0,2 * 5 = 1
  • конец: 1 * 1 = 1

Но это не относится к промежуточным этапам перехода.Рассмотрим, например, когда переход выполнен на 50%:

  • контейнерная шкала Y: 0,2 + (1 - 0,2) * 0,5 = 0,6
  • дочерняя шкала Y: 5 + (1 - 5)* 0,5 = 3
  • контейнерная шкала Y * дочерняя шкала Y: 0,6 * 3 = 1,8

Проверьте график ниже, чтобы увидеть, как изменяется эта пропорция:

Proportion variation

Фиолетовая линия показывает шкалу Y ребенка во время перехода, синяя линия показывает шкалу контейнера Y, а темно-желтая линия показывает шкалу контейнера Y * дочерняя шкала Y

Итак, вЧтобы действительно отменить контейнерное преобразование во время перехода, вам нужно использовать функцию замедления, которая содержит выражение container scale * child scale = 1 для всего перехода.И это не простая задача.

0 голосов
/ 08 июня 2018

Я думаю, что это из-за этой строки: 

#menu.collapsedd .inner {
  transform: scaleY(5);
}

Когда добавлен collapsedd, вы масштабируете Y содержимого до 5, пытаетесь изменить это значение до 1 или просто не выполняете масштабирование внутреннейдела.Вы могли бы использовать непрозрачность или что-то еще, чтобы затемнить?

...