动画ngIf

Question

我在使用div进行切换时试图为*ngIf设置动画。

我认为我遇到的问题是动画中一个众所周知的延迟/计时问题，但我无法找到合法的解决方案。

1）当现有元素开始他的离开动画时，他仍然在DOM中。

2）进入元素在此期间开始动画。

3）问题是当第一个元素完成动画并从DOM中删除时，第二个元素已经可见，因此会产生UI故障

以下代码不是我的，但它证明了我的问题。

有人能指出我正确的方向吗？

＆＃13;

＆＃13;

angular.module('app', ['ngAnimate']).
controller('ctrl', function(){});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您一次只能拥有一件商品，可以将其设为position: absolute 这样他们就不会影响彼此的定位

我们可以通过添加ng-class来添加动画

＆＃13;

＆＃13;

angular.module('app', ['ngAnimate']).
controller('ctrl', function() {});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;