AngularJS 1.2从0到0.5的淡入淡出动画不起作用

Posted 2023-03-06

【中文标题】AngularJS 1.2从0到0.5的淡入淡出动画不起作用

【英文标题】：AngularJS 1.2 fade animation from 0 to 0.5 not working

【发布时间】：2013-11-20 17:44:32

【问题描述】：

所以我使用 AngularJS 1.2 和 ngAnimate 模块制作了这个简单的淡入淡出动画，但我遇到了一个小问题。

我想显示/隐藏一个带有淡入淡出动画的元素，但我希望元素从不透明度：0 淡化到不透明度：0.5。问题是，元素在我设置的持续时间内从 0 淡化到 0.5，但是在动画结束后，它会将不透明度设置为 1。我不希望这样。

这是我的 CSS 代码：

.overlay 
    background-color: #ff0000;
    position: absolute;
    width: 150px;
    height: 150px;

.fade-animation.ng-hide-add, .fade-animation.ng-hide-remove 
    transition: 2s linear all;
    display: block !important;

.fade-animation.ng-hide-remove 
    opacity: 0;

.fade-animation.ng-hide-remove.ng-hide-remove-active 
    opacity: .5;

.fade-animation.ng-hide-add 
    opacity: .5;

.fade-animation.ng-hide-add.ng-hide-add-active 
    opacity: 0;

这是一个问题示例：http://jsfiddle.net/Kn3th/8/

我正在 Firefox 上对此进行测试。

【参考方案1】：

这是因为一旦动画完成，动画相关的类就会被移除，所以只有.overlay 定义适用。只需将其添加到您的 CSS 中：

.overlay 
    ...
    opacity: .5;   // <-- add this line to apply an opacity of 0.5
                         when the animation is over

另请参阅此short demo。

【讨论】：

这是我第一次尝试的，虽然它在示例中工作，但它并不完全适用于我的真实代码。我无法真正发现两者之间的差异。我试图在小提琴中复制我的真实代码。发生的情况是最终的不透明度立即设置，当我尝试将其隐藏时，不透明度仍然存在。

不幸的是，如果问题在您发布的代码中无法重现，我极不可能在您的真实代码中找到问题。如果您无法提供 SSCCE，请尝试发布您的真实代码（如果可能）。如果这不可能，请尝试详细描述真实代码中发生的情况（以及它如何偏离预期行为）。

我发现了问题。这与我的真实示例更相似：jsfiddle.net/Kn3th/9 查看 .css 中的第一行。从选择器中删除 #outer 可以解决问题。这有意义吗？

是的，确实如此 :) #outer div.overlay 的特异性大于动画相关选择器的特异性（例如.fade-animation.ng-hide-add）。您必须使选择器同样具体，这可以通过从第一个选择器中删除 #outer 或将其添加到其余选择器（例如 #outer .fade-animation.ng-hide-add 等）来实现。

这是有道理的。谢谢。