所以我使用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上测试它。
答案 0 :(得分:2)
这是因为一旦动画完成,就会删除与动画相关的类,因此只应用.overlay
定义。只需将其添加到您的CSS:
.overlay {
...
opacity: .5; // <-- add this line to apply an opacity of 0.5
} when the animation is over
另请参阅此 short demo 。