Javascript ng显示CSS音量控制器不工作

我正在尝试实现第二个解决方案，该解决方案可以让文本在

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>

我的观点是：

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

---

JSFiddle是。

我只是做了与您所看到的相同的事情，但我从来没有在angular中使用过

ngAnimate

，所以我从stackoverflow问题的参考链接中提取了示例代码，并添加了

fader.ng隐藏移除

和

添加

类。现在它工作正常，希望这能满足您的条件。

var myApp=angular.module（'myApp'，['ngAnimate']）
.fader.ng-hide{
不透明度：0；
}
.fader.ng-hide-remove，
.fader.ng-hide-add{
显示：块！重要；
}
.fader.ng-隐藏-移除{
过渡：所有线性1000ms；
}
.fader.ng-hide-add{
过渡：所有线性500ms；
}

淡出我
我只是做了与您所看到的相同的操作，但我从来没有在angular中使用过
ngAnimate
，所以我从stackoverflow问题的参考链接中提取了示例代码，并添加了
fader.ng hide remove
和
add
类。现在它工作正常，希望这能满足您的条件。
var myApp=angular.module（'myApp'，['ngAnimate']）
.fader.ng-hide{
不透明度：0；
}
.fader.ng-hide-remove，
.fader.ng-hide-add{
显示：块！重要；
}
.fader.ng-隐藏-移除{
过渡：所有线性1000ms；
}
.fader.ng-hide-add{
过渡：所有线性500ms；
}

淡出我
隐藏
ng
类集
显示：无！重要信息

用
display:block覆盖它！重要的

演示

.fader{
过渡：所有线性500ms；
不透明度：1；
}
.音量控制器{
显示：块！重要；
过渡：所有线性500ms；
不透明度：0；
}

点击我
淡出我
隐藏
ng
类集
显示：无！重要信息

用
display:block覆盖它！重要的

演示

.fader{
过渡：所有线性500ms；
不透明度：1；
}
.音量控制器{
显示：块！重要；
过渡：所有线性500ms；
不透明度：0；
}

点击我
淡出我
但是第一个答案有更多的赞成票，它工作得很完美：我想你错过了
ngAnimate
here@NishantDixit当我添加这些内容时，无论我按什么，文本总是显示出来，但第一个答案有更多的赞成票，它工作得非常完美：我认为您缺少
ngAnimate
here@NishantDixit当我补充这一点时，无论我按什么，文字始终显示。您如何使文字淡入？我更喜欢你的答案，因为它不使用ngAnimate，但当我运行它时，显示转换不起作用。你如何让文本也淡入？我更喜欢你的答案，因为它不使用ngAnimate，但当我运行它时，显示转换不起作用。
var myApp = angular.module('myApp', []);