angularjs - ng-animate 在 1.3 中不起作用

Question

我正在上课 ng-animate应用于指令，但我没有得到:
ng-hide-remove.ng-hide-remove-active或 .ng-hide-remove.ng-hide-remove-active
我加载了 angular 和 angular-animate 1.3。并且包括 ngAnimate在 app.js 中

<div class="message animate-show {{message.type}}" ng-show="message">
    {{message.text}}
</div>

转换没有发生:

.message.animate-show {
    line-height:20px;
    opacity:1;
    padding:10px;

    &.ng-hide-add.ng-hide-add-active,
    &.ng-hide-remove.ng-hide-remove-active {
        -webkit-transition:all linear 0.5s;
        transition:all linear 0.5s;
    }

    &.ng-hide {
        line-height:0;
        opacity:0;
        padding:0 10px;
    }
}

Answer 1

对于像淡入/淡出这样的简单动画，您需要以下 CSS 类:

.my-animation {
    -webkit-transition: 0.5s linear all;
    transition: 0.5s linear all;
    opacity: 1;
}

.my-animation.ng-hide {
    opacity: 0;
}

更新 :

如果您不想影响元素上的其他转换，请使用以下 CSS 定义仅在淡入/淡出时应用转换:

.my-animation {
    opacity: 1;
}

.my-animation.ng-hide {
    opacity: 0;
}

.my-animation.ng-hide-add,
.my-animation.ng-hide-remove {
    -webkit-transition: 0.5s linear all;
    transition: 0.5s linear all;
}

另见此 short demo .