AngularJS中CSS Transitions无法生效问题求助

解决AngularJS 1.3.x中CSS过渡动画失效的问题 #

我来帮你排查这个淡入动画不工作的问题，这在AngularJS 1.x版本里是挺常见的小坑，咱们一步步来定位解决：

1. 先确认ngAnimate模块是否正确注入

这是最容易忽略的第一步！AngularJS的动画功能完全依赖ngAnimate模块，你不仅要引入对应的脚本，还要在你的应用模块里明确注入它：

// 务必把ngAnimate加到依赖数组里
var myApp = angular.module('myApp', ['ngAnimate']);

2. 检查CSS动画类的命名规范

AngularJS对动画类的命名有固定规则，淡入效果需要配合ng-enter相关的类来写。举个标准的淡入CSS示例：

/* 元素刚被插入DOM时的初始状态 */
.fade-content.ng-enter {
  opacity: 0;
  /* 定义过渡动画的时长和曲线 */
  transition: opacity 0.6s ease-in-out;
}

/* 动画激活后的目标状态 */
.fade-content.ng-enter.ng-enter-active {
  opacity: 1;
}

注意：这个类要加在被Angular指令控制显示/隐藏的元素上，比如用ng-if、ng-show或者ng-repeat渲染的元素。

3. 确保用Angular指令控制DOM变化

动画只会在Angular管理DOM插入/移除时触发，如果你是手动用原生JS修改display属性或者直接插入元素，Angular不会触发动画。比如你应该用：

<button ng-click="showContent = !showContent">显示内容</button>
<!-- 用ng-if控制元素的插入/移除，触发ng-enter动画 -->
<div class="fade-content" ng-if="showContent">
  这是要淡入的内容
</div>

而不是直接用document.getElementById('xxx').style.display = 'block'这种方式。

4. 确认Angular和Angular-animate版本完全匹配

你用的是Angular 1.3.11，那angular-animate必须也是1.3.11版本，版本不匹配会直接导致动画失效。检查你的脚本引入：

<script src="https://code.angularjs.org/1.3.11/angular.js"></script>
<!-- 必须和Angular核心版本一致 -->
<script src="https://code.angularjs.org/1.3.11/angular-animate.js"></script>

5. 用最小测试案例排查干扰因素

如果上面的步骤都做了还是不行，建议先写一个极简的测试案例，排除项目中其他CSS或JS的干扰：

<div ng-app="testApp" ng-controller="TestCtrl">
  <button ng-click="toggle = !toggle">切换内容</button>
  <div class="fade-test" ng-if="toggle">
    测试淡入效果
  </div>
</div>

<style>
.fade-test.ng-enter {
  opacity: 0;
  transition: opacity 0.5s;
}
.fade-test.ng-enter.ng-enter-active {
  opacity: 1;
}
</style>

<script>
angular.module('testApp', ['ngAnimate'])
  .controller('TestCtrl', function($scope) {
    $scope.toggle = false;
  });
</script>

如果这个案例能正常工作，说明你的项目里存在CSS优先级冲突（比如其他样式用了!important覆盖opacity），或者指令使用不当的问题，可以用浏览器开发者工具检查元素的样式应用情况。

内容的提问来源于stack exchange，提问作者J Seabolt