Question

我将课程ng-animate应用于该指令，但我没有得到：

ng-hide-remove.ng-hide-remove-active或.ng-hide-remove.ng-hide-remove-active

我有角度和角度 - 动画1.3加载。并且我在app.js中包含ngAnimate

<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 。

Answer 2

ExpertSystem上面的回答是正确的。但是，如果仍然无法使动画在Angular中工作，那么您需要确保将ngAnimate模块添加到您的应用中：

ngAnimate模块通过回调挂钩为基于CSS的动画（关键帧和过渡）以及基于JavaScript的动画提供支持。

参见来源： https://docs.angularjs.org/api/ngAnimate

这可以在定义AngularJS应用程序的代码中完成，如下所示：

var app = angular.module('myApp', ['ngAnimate']);

ng-animate在1.3中不起作用

2 个答案: