javascript - 如何使用ng-animate为ng-view设置JS动画？

可以做类似的事情：

<section ng-view ng-animate="{enter: 'showExpand', leave: 'showExpand'}" id="mainContent">
</section>

而showExpand是JS中的动画：

angular.animation(".showExpand", function () {
        return {
            enter: function(element, done){
                TweenMax.to(element, .8, {opacity: 1, top: '35pt'});
                done();
            },
            leave: function(element, done){
                TweenMax.to(element, .8, {opacity: 0, top: '-45pt'});
                done();
            },
            addClass: function (element, className) {
                TweenMax.to(element, .4, {opacity: 1, top: '35pt'});
            },
            removeClass: function (element, className) {
                TweenMax.to(element, .4, {opacity: 0, top: '-45pt'});
            }
        }
    };
);

我试过了：

 ng-animate="{enter: 'showExpand', leave: 'showExpand'}"
    ng-animate="{enter: 'show-expand', leave: 'show-expand'}"
    ng-animate="{enter: '.showExpand', leave: '.showExpand'}"
    ng-animate="{enter: '.show-expand', leave: '.show-expand'}"

我找不到这个问题的任何东西

最佳答案

查找不再使用ng-animate标记的新docs for ngAnimate from Angular 1.2 onwards。

并且您需要添加定义的类。因此应该是：

<section ng-view class="showExpand" id="mainContent"></section>