ng-animate #7

Wscats · 2016-08-10T23:31:45Z

Wscats · 2016-08-11T13:10:58Z

引入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 · 2016-09-27T15:15:18Z

我么除了可以用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;
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ng-animate #7

ng-animate #7

Wscats commented Aug 10, 2016 •

edited

Wscats commented Aug 11, 2016 •

edited

Wscats commented Sep 27, 2016 •

edited

ng-animate #7

ng-animate #7

Comments

Wscats commented Aug 10, 2016 • edited

Wscats commented Aug 11, 2016 • edited

Wscats commented Sep 27, 2016 • edited

JS写法

CSS写法

Wscats commented Aug 10, 2016 •

edited

Wscats commented Aug 11, 2016 •

edited

Wscats commented Sep 27, 2016 •

edited