Skip to content

ng-animate #7

Open
Open

Activity

Wscats

Wscats commented on Aug 11, 2016

@Wscats
OwnerAuthor

引入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-enterng-leave
可以使用ng-enterng-leave,配合使用之后就可以让ng-view视图切换的时候产生动画,注意ng-enterng-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

Wscats commented on Sep 27, 2016

@Wscats
OwnerAuthor

我么除了可以用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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Wscats

        Issue actions

          ng-animate · Issue #7 · Wscats/angular-tutorial