<a href="http://www.oschina.net/translate/animating-angularjs-apps-ngview" rel="nofoll

引入JS文件 < type="text/java

我么除了可以用ng-XXX的方式来给元素添加动画还可以用JS来触发动画 <div class="snippet-clipboard-content notransl

ng-animate about angular-tutorial HOT 2 OPEN

wscats commented on May 29, 2024

ng-animate

from angular-tutorial.

Comments (2)

Wscats commented on May 29, 2024

引入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';
}]);

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

from angular-tutorial.

Wscats commented on May 29, 2024

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

from angular-tutorial.

ng-animate about angular-tutorial HOT 2 OPEN

Comments (2)

JS写法

CSS写法

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent