首页 文章

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

提问于
浏览 次
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上测试这个 .

angularjs animation opacity fade

1 回答

  • 2

    这是因为动画一完成就会删除与动画相关的类，因此只应用 .overlay 定义 . 只需将其添加到您的CSS：

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

    另见，这是 short demo .

    回复于

相关问题