1

所以我使用 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 上测试这个。

4

1 回答 1

2

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

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

另请参阅这个简短的演示。

于 2013-11-08T16:42:26.860 回答