ng-animate

[Wscats]

让你的 AngularJS 应用动起来:ngView

AngularJS ngView Animation Effects

ngAnimate官方文档

[Wscats]

引入JS文件 <script type="text/javascript" src="dist/js/angular-animate.js"></script> <script type="text/javascript" src="dist/js/angular-animate.js"></script>

注入模块ngAnimate var app = angular.module('wsscat', ['ngRoute', 'ngAnimate']);

ng-enter和ng-leave 可以使用ng-enter和ng-leave，配合使用之后就可以让ng-view视图切换的时候产生动画，注意ng-enter和ng-leave和类名之间组合使用的时候中间是没有空格的

.fad {
            bottom: 0;
            padding-top: 200px;
            position: absolute;
            text-align: center;
            top: 0;
            width: 100%;
        }

        @keyframes slideOutLeft {
            to {
                transform: translateX(-100%);
            }
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(0);
            }
        }

        @keyframes slideInLeft {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        @keyframes slideOutRight {
            to {
                transform: translateX(100%);
            }
        }

        .page-index.ng-enter {
            animation: slideInRight 5s both ease-in;
        }

        .page-index.ng-leave {
            animation: slideOutLeft 5s both ease-in;
        }

        .page-hot.ng-enter {
            animation: slideInLeft 5s both ease-in;
        }

        .page-hot.ng-leave {
            animation: slideOutRight 5s both ease-in;
        }

        .page-index.ng-enter {
            animation: slideInLeft 1s both ease-in;
        }

        .page-index.ng-leave {
            animation: slideOutRight 1s both ease-in;
        }

        .page-hot.ng-enter {
            animation: slideInLeft 1s both ease-in;
        }

        .page-hot.ng-leave {
            animation: slideOutRight 1s both ease-in;
        }

如果我们只使用.ng-enter和.ng-leave定义动画，那么全部加载的地方都有动画

               .ng-enter {
            animation: slideInLeft 1s both ease-in;
        }

        .ng-leave {
            animation: slideOutRight 1s both ease-in;
        }

ng-view 在ng-view上加入对应的class，我们可以在每个路由定义pageClass的变量 例如下面： <div class="fad {{pageClass}}" ng-view=""></div>

app.controller('indexCtrl', ['$scope', function($scope) {
                $scope.pageClass = 'page-index';
}]);

app.controller('wsscatCtrl', ['$scope', function($scope) {
                $scope.pageClass = 'page-hot';
}]);

所以上面两个控制器可以根据变量放不同的类名，实现不同控制器有不同的切换动画

[Wscats]

我么除了可以用ng-XXX的方式来给元素添加动画还可以用JS来触发动画

<button ng-click="bool=!bool">Ok</button>
<div ng-if="bool" class="pop">123</div>

同样是药先引入ngAnimate模块 var app = angular.module('wsscat', ['ngAnimate']); 我们可以用animation方法并且使用$animateCss服务来定义过度动画，当然它其实相当于下面这两种过渡动画，只是一个写在js里面一个定义在css里面 .ng-enter -> .ng-enter.ng-enter-active .ng-leave -> .ng-leave.ng-leave-active

JS写法

app.animation(".pop", ["$animateCss", function($animateCss) {
            return {
                enter: function(element) {
                    return $animateCss(element, {
                        from: {
                            opacity: 0
                        },
                        to: {
                            opacity: 1
                        },
                        duration: 1.5
                    })
                },
                leave: function(element) {
                    return $animateCss(element, {
                        from: {
                            opacity: 1
                        },
                        to: {
                            opacity: 0
                        },
                        duration: 1.5
                    });
                }
            }
        }]);

CSS写法

.pop.ng-enter {
            transition: 1.5s linear all;
            opacity: 0;
        }

        .pop.ng-enter.ng-enter-active {
            opacity: 1;
        }

        .pop.ng-leave {
            transition: 1.5s linear all;
            opacity: 1;
        }

        .pop.ng-leave.ng-leave-active {
            opacity: 0;
}