элементы перекрываются при анимации ngIf - PullRequest
Новая
       9

элементы перекрываются при анимации ngIf

0 голосов
/ 27 мая 2018

Я пытаюсь анимировать div при переключении с помощью *ngIf.

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

1) Когда существующий элемент начинает анимацию ухода, он все еще находится в DOM.

2) элемент ввода начинает свою анимацию в течение этого времени.

3) Проблема заключается в том, что к тому моменту, когда первый элемент завершает анимацию и удаляется из DOM, второй элемент уже виден, таким образом, возникает сбой пользовательского интерфейса

Следующий код не мой, но он демонстрирует мою проблему.

Может ли кто-нибудь указать мне правильное направление? 

angular.module('app', ['ngAnimate']).
controller('ctrl', function(){});
.fade-element-in.ng-enter {
  transition: 0.8s linear all;
  opacity: 0;
}

.fade-element-in-init .fade-element-in.ng-enter {
  opacity: 1;
}

.fade-element-in.ng-enter.ng-enter-active {
  opacity: 1;
}

.fade-element-in.ng-leave {
  transition: 0.3s linear all;
  opacity: 1;
}
.fade-element-in.ng-leave.ng-leave-active {
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <a href="" ng-click="showMe = !showMe">Click me</a>
  <div class="fade-element-in" ng-if="showMe">
    SomeContent
  </div>
  <div class="fade-element-in" ng-if="!showMe">
    SomeOtherContent
  </div>
</div>

1 Ответ

0 голосов
/ 27 мая 2018

Если вы хотите иметь по одному элементу за раз, вы можете установить его на position: absolute, чтобы они не влияли на позиционирование друг друга

, мы можем пойти дальше, добавив ng-class, чтобы добавитьанимация 

angular.module('app', ['ngAnimate']).
controller('ctrl', function() {});
.fade-element-in.ng-enter {
  transition: 0.8s linear all;
  opacity: 0;
}

.fade-element-in-init .fade-element-in.ng-enter {
  opacity: 1;
}

.fade-element-in.ng-enter.ng-enter-active {
  opacity: 1;
}

.fade-element-in.ng-leave {
  transition: 0.5s linear all;
  opacity: 1;
}

.fade-element-in.ng-leave.ng-leave-active {
  opacity: 0;
}

.container {
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <a href="" ng-click="showMe = !showMe">Click me</a>
  <div class="container">
    <div ng-class="{'fade-element-in': showMe}" ng-if="showMe">
      SomeContent
    </div>
  </div>
  <div class="container">
    <div ng-class="{'fade-element-in': !showMe}" ng-if="!showMe">
      SomeOtherContent
    </div>
  </div>
</div>
...