使用ngIf切换元素时动画重叠问题求助

嘿，这个问题我之前也碰到过！本质是AngularJS的ngAnimate在处理ngIf切换时，两个元素的动画是并行触发的——旧元素还在DOM里执行离场动画呢，新元素就已经开始入场了，等旧元素彻底被移除时，新元素已经显示出来，就会造成UI闪烁的问题。给你两个实用的解决方向：

方案一：CSS延迟入场动画（简单快速） #

核心思路是让新元素的入场动画延迟触发，延迟时长等于旧元素的离场动画时长，等旧元素完全从DOM移除后，新元素再开始淡入。

修改你的CSS代码如下：

/* 给入场动画添加0.3s延迟（和离场动画时长一致），同时用visibility确保延迟期间不可见 */
.fade-element-in.ng-enter { 
  transition: 0.8s linear 0.3s all; 
  opacity: 0;
  visibility: hidden;
} 

/* 入场激活状态下恢复可见并淡入 */
.fade-element-in.ng-enter.ng-enter-active { 
  opacity: 1;
  visibility: visible;
} 

/* 离场动画保持不变 */
.fade-element-in.ng-leave { 
  transition: 0.3s linear all; 
  opacity: 1;
} 

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

这样调整后，旧元素的0.3s离场动画完成后，新元素才会启动它的0.8s淡入动画，完全避免了两个元素同时在DOM中可见的阶段，闪烁问题就解决了。

方案二：JS手动控制动画时序（灵活可控） #

如果需要更精确的动画流程控制，可以借助AngularJS的$animate服务，监听旧元素的离场动画完成事件，再触发新元素的显示。

修改控制器代码：

angular.module('app', ['ngAnimate'])
.controller('ctrl', function($scope, $animate, $element) {
  $scope.showMe = false;

  $scope.toggleContent = function() {
    // 找到当前正在显示的元素
    const currentElement = $element.find('.fade-element-in.ng-scope');
    
    if (currentElement.length) {
      // 先执行旧元素的离场动画，完成后再切换状态
      $animate.leave(currentElement).then(() => {
        $scope.showMe = !$scope.showMe;
      });
    } else {
      // 初始状态下直接切换
      $scope.showMe = !$scope.showMe;
    }
  };
});

再修改HTML的点击事件：

<a href="" ng-click="toggleContent()">Click me</a>

这种方法彻底避免了两个元素同时存在于DOM中的情况，完全由代码控制动画的先后顺序，适合复杂的动画交互场景。

内容的提问来源于stack exchange，提问作者Omri Btian