AngularJS ng-show结合CSS渐变效果无法正常工作

嘿，我看了你尝试实现的淡入效果代码，发现问题出在Angular默认的ng-hide样式上——它会直接给元素加上display: none !important，这会打断opacity的过渡动画，导致你看不到预期的淡入效果。咱们来调整一下代码，让它正常工作：

修正后的HTML代码 #

和你原来的代码一致，不需要修改：

<input ng-focus="hasFocus = true" ng-blur="hasFocus = false" type="text" placeholder="Click to fade"/> 
<p ng-show="hasFocus" class="fader">Fade me</p>

修正后的CSS代码 #

关键是覆盖ng-hide的默认display属性，让过渡动画能正常触发：

/* 基础样式，默认显示状态 */
.fader {
  transition: all linear 500ms;
  opacity: 1;
}

/* 隐藏状态的样式 */
.fader.ng-hide {
  opacity: 0;
  /* 覆盖Angular默认的display:none，确保过渡过程中元素可见 */
  display: block !important;
}

/* 定义过渡的激活状态，确保动画平滑执行 */
.fader.ng-hide-add.ng-hide-add-active,
.fader.ng-hide-remove.ng-hide-remove-active {
  transition: all linear 500ms;
}

/* 过渡结束后，彻底隐藏元素（可选，避免透明元素占用空间） */
.fader.ng-hide:not(.ng-hide-animate) {
  display: none;
}

AngularJS代码 #

AngularJS 1.2+默认支持基础的动画类，所以你的代码可以保持不变：

var myApp = angular.module('myApp', []);

原理说明 #

• AngularJS的ng-show指令会在表达式为false时给元素添加ng-hide类，为true时移除该类。
• 我们通过CSS过渡，让元素在ng-hide类添加/移除时，平滑地改变opacity属性。
• 覆盖ng-hide的display属性是关键，否则元素会直接被隐藏，看不到过渡效果；最后通过:not(.ng-hide-animate)选择器，确保过渡结束后元素彻底隐藏，不会占用多余空间。

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