代码之家 › 专栏 › 技术社区 › Omri Btian

设置ngif动画时元素重叠

css-animations angular5 angular css javascript

Omri Btian · 技术社区 · 7 年前

我正在尝试制作动画 div 使用切换时的 *ngIf .

我假设我遇到的问题是动画中一个相当有名的延迟/定时问题,但我无法找到一个合法的解决方案。

1)当现有元素开始他的离开动画时,他仍在DOM中。

2)输入元素在此期间启动动画。

3) 问题当第一个元素完成动画并从DOM中移除时,第二个元素已经可见,因此会产生一个UI问题。

下面的代码不是我的,但它演示了我的问题。

有人能给我指个方向吗?

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 回复 | 直到 7 年前

Joe Warner 7 年前

如果你一次要有一个项目,你可以将其设置为 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前