как сделать анимацию перехода ng-show / ng-hide более плавной

Question

Наша команда разрабатывает в ServiceNow и создала страницу с виджетом, которая встраивает несколько других виджетов в разные вкладки. Мы используем метод ng-show / ng-hide, чтобы показать / скрыть указанные вкладки. Мы добавили некоторые базовые переходы CSS для увеличения и уменьшения выбранной вкладки:

.animate-switch {
  transition: all linear 1s;
  opacity: 1;
}
.animate-switch.ng-hide {
  opacity: 0;
}

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

Есть ли что-нибудь, что мы можем добавить к нашему CSS, чтобы сделать этот переход немного более плавным?

Answer 1

Я бы предложил удалить значение "all" при переходе и просто передать то, что вы на самом деле используете, например, opacity. Смотреть все, что может измениться, немного дорого.

Возможно, вы также захотите форсировать аппаратное ускорение (ваш GPU намного лучше), добавив 3D-преобразование.

.animate-switch {
  transition: opacity linear 1s;
  transform: translateZ(0);
  opacity: 1;
}
.animate-switch.ng-hide {
  opacity: 0;
}