AngularJS点击触发过渡效果：ng-click/ng-show能否实现淡入/滑显？

你现在用ng-click配合ng-show的方案完全是可行的！不需要替换现有逻辑，只需要补充过渡效果的实现部分，就能实现淡入或者滑下的动画。下面给你两种常用的实现方式：

方法一：纯CSS过渡（无需额外模块） #

这种方法最简单，利用AngularJS给ng-show元素自动添加的ng-hide类，结合CSS的transition属性来实现动画。

假设你的完整代码结构是这样的：

<div class="col-sm-12">
  <div>
    <h3 class="no-margin-bottom toggleText" ng-click="showInfoHe = !showInfoHe">
      <i class="fa fa-plus-circle" aria-hidden="true"></i> Hälsoinformation
    </h3>
    <div class="info-content" ng-show="showInfoHe">
      <!-- 这里是要显示的信息内容 -->
    </div>
  </div>
</div>

然后添加CSS样式：

/* 默认显示状态的样式 */
.info-content {
  opacity: 1;
  max-height: 1000px; /* 设置足够大的值，覆盖内容最大高度 */
  transition: all 0.3s ease; /* 可调整过渡时长和缓动效果 */
  overflow: hidden;
}

/* ng-hide生效时的隐藏状态样式 */
.info-content.ng-hide {
  opacity: 0;
  max-height: 0;
}

• 用max-height而非height，是因为如果内容高度不确定，height:0无法自适应，max-height可以模拟滑下的展开/收起效果；
• opacity属性用来实现淡入淡出的透明度变化；
• 修改transition里的0.3s可以调整动画的快慢。

方法二：使用AngularJS的ngAnimate模块 #

如果需要更精细的动画控制，可以引入AngularJS的ngAnimate模块，它会给ng-show/ng-hide的元素添加一系列动画状态类（比如ng-hide-add、ng-hide-remove等）。

1. 首先引入angular-animate.js文件（注意和你的AngularJS主文件版本保持一致）；
2. 在你的AngularJS模块中注入ngAnimate：

angular.module('yourAppName', ['ngAnimate']);

3. 然后添加CSS样式：

/* 定义动画过渡的基础规则 */
.info-content.ng-hide-add, .info-content.ng-hide-remove {
  transition: all 0.3s ease;
  overflow: hidden;
}

/* 隐藏动画的起始状态 */
.info-content.ng-hide-add {
  opacity: 1;
  max-height: 1000px;
}

/* 隐藏动画的结束状态 */
.info-content.ng-hide-add.ng-hide-add-active {
  opacity: 0;
  max-height: 0;
}

/* 显示动画的起始状态 */
.info-content.ng-hide-remove {
  opacity: 0;
  max-height: 0;
}

/* 显示动画的结束状态 */
.info-content.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
  max-height: 1000px;
}

这种方式可以分别控制显示和隐藏动画的细节，灵活性更高。

总结一下：你现有的ng-click+ng-show方案完全可以实现过渡效果，只需要配合上面的CSS或者ngAnimate模块即可，不需要替换核心逻辑。

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