Question

我有一个span元素，我想在点击一个按钮时淡入。我已设置与ng-enter和ng-enter-active相关的属性，如下所示：

span{
    display: block;
    height: 200px;
    width: 200px;
    background-color: blue;
}
span.ng-enter{
    transition: 0.75s;
    opacity: 0;
}
span.ng-enter-active{
    opacity: 1;
}

但是淡入效果不存在。当我查看DOM时，它看起来并不像过渡类那样附加到元素上。

这里有什么问题？

JSFiddle

Answer 1

正如您在the docs中看到的那样（请参阅“动画”部分），ngHide会将ng-hide类用于动画。在css中使用此类而不是ng-enter。

所以你想只为淡入而不是淡出来执行动画。在淡入元素上有额外的类：ng-hide-remove。为它添加动画：

/* initial state before animation */
span.ng-hide-remove {
    opacity: 0;
    transition: 0.75s;
}
/* state after animation */
span.ng-hide-remove-active {
    opacity: 1;
}

此处已更新JSFiddle

Answer 2

.ng-enter用于动画ng-repeat和ng-if。

对于ng-hide使用.ng-hide。

span{
    display: block;
    height: 200px;
    width: 200px;
    background-color: blue;
    opacity:1;
    transition: 0.75s;
}
span.ng-hide{
    opacity: 0;
}

过渡/动画在Angular 1.3中不起作用？

2 个答案: