javascript - 带有 CSS 推子的 ng-show 不工作

Question

我正在尝试实现找到的第二个解决方案 here让文本在 ng-show 上淡出。我的 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 是:

.fader.ng-show {
    transition: all linear 500ms;
    opacity: 1;
}

.fader.ng-hide {
    transition: all linear 500ms;
    opacity: 0;
}

我的 Angular 是:

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

JSFiddle 是 here .

Answer 1

我只是做了你正在看的，但我从来没有在 Angular 中使用 ngAnimate 所以我从你的 stackoverflow 问题的引用链接中获取示例代码并添加 fader.ng-hide-remove 和 add 类现在工作正常，希望这会满足您的条件。

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

.fader.ng-hide {
    opacity: 0;
}

.fader.ng-hide-remove,
.fader.ng-hide-add {
  display: block !important;
}

.fader.ng-hide-remove {
  transition: all linear 1000ms;
}

.fader.ng-hide-add {
  transition: all linear 500ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<div ng-app="myApp">
<input ng-focus="hasFocus = true" ng-blur="hasFocus = false" type="text" placeholder="Click to fade"/>
<p ng-show="hasFocus" class="fader">Fade me</p>
</div>