Плавный переход, когда div перемещается другим div, добавляемым ngAnimate и translate

0

У меня есть два divs один поверх другого.

Верхний div отображается с помощью ngAnimate и выталкивает второй div вниз.

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

@keyframes enter_not_smooth {
  from {transform: translateY(-100px);} to {transform: translateX(0px);}
}

@keyframes leave_not_smooth {
  from {transform: translateY(0px);} to {transform: translateY(-100px);}
}

Проблема: нижний div не движется плавно, поскольку верхний div отображается, вместо этого он переходит к окончательной позиции.

Если я использую анимацию высоты, чтобы показать верхний div, нижний div перемещается плавно, когда отображается верхний div.

@keyframes enter_smooth {
  from {height: 0px;} to {height: 100px;}
}

@keyframes leave_smooth {
  from {height: 100px;} to {height: 0px;}
}

Пожалуйста, посмотрите этот jsfiddle, если вам нужно уточнение https://jsfiddle.net/9bz4Lwxa/105/

Вопрос: Есть ли способ добиться гладкой анимации с использованием свойства translateY или другого свойства, которое достигнет аналогичной анимации раскрытия, где верхний div не растет в высоту, но имеет полный размер и просто толкает нижний div в сторону?

Спасибо.

Теги:
css-animations
ng-animate

1 ответ

1
Лучший ответ

Это сложный вопрос, и я потратил часы и часы и часы на то, чтобы выполнить. Единственное рабочее решение, которое я придумал, действительно сложно и не стоит лишнего кода.

Проблема заключается в том, что когда вы используете transform для анимации элемента, его ограничивающая рамка остается статической (по-видимому, за сценами DOM) и не будет анимировать, чтобы не влиять на какие-либо элементы брата. Для справки я читал: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

В качестве альтернативы анимировать высота/ширину/и т.д. (потому что он вызывает перерисовку/перекомпоновку в браузере) Я прибег к использованию transform анимации, которые просто чувствуют себя лучше, учитывая затруднительное положение.

Я создал пример, основанный на вашей скрипке: https://jsfiddle.net/tommywhitehead/5q6wec92/1/

Примечание. Похоже, вы можете вводить ngAnimate в нетрадиционный способ, чтобы он не читал функцию синхронизации времени (какие места .ng-enter и .ng-enter-active в нужное время), но я думаю, что это должно дать вам правильная идея.

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

Надеюсь, это поможет!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню