Angular 1.2.12 和 ng-view 动画答案

【问题标题】：Angular 1.2.12 and ng-view animationAngular 1.2.12 和 ng-view 动画
【发布时间】：2014-02-20 22:13:48
【问题描述】：

在使用 Angular 为路线更改设置动画时，我遇到了一个令人沮丧的问题。没有动画，在某些配置中，我尝试了各种在线资源，这些类闪现到元素上，而其他（阅读：大多数）类甚至没有应用于元素。

这是我的 index.html

<!doctype html>
<html>
    <head>
        <title>Drop Calculator</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/animate.css">

        <!-- LessCSS -->
        <link rel="stylesheet/less" type="text/css" href="css/main.less">
        <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.2/less.min.js"></script>
    </head>
    <body ng-app="DropCalculator" ng-controller="MainCtrl">
        <main class="container">
            <vl-keypad></vl-keypad>
            <div ng-view class="animate"></div>
        </main>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
        <script src="http://code.angularjs.org/1.2.12/angular-animate.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"></script>
        <script src="js/app.js"></script>
        <script src="js/directives.js"></script>
        <script src="js/services.js"></script>
        <script src="js/controllers.js"></script>
    </body>
</html>

还有 animate.css

.animate-ng-enter, .animate-ng-leave {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}
.animate-ng-enter {
    -webkit-transform:translateX(100%);
}
.animate-ng-enter.ng-enter-active {
    -webkit-transform:translateX(0%);
}
.animate-ng-leave.ng-leave-active {
    -webkit-transform:translateX(-100%);
}

app.js

angular.module('DropCalculator', ['ngAnimate', 'ngRoute'])
.config(['$routeProvider', function($routeProvider){
    $routeProvider
    .when('/', {
        templateUrl : 'partials/home.html'
    })
    .when('/results', {
        templateUrl : 'partials/results.html'
    })
    .otherwise({
        redirectTo : '/'
    })
}])

路线改变得很好，但没有播放动画。我什至不认为动画类应用于元素。我尝试了 class="animate" 属性应用的不同变体，但无济于事。我也尝试过不同的 CSS 属性。

这令人沮丧！有什么想法吗？

【问题讨论】：

标签： angularjs animation

【解决方案1】：

你的 Html 和 routeprovider 没问题，检查一下 css！希望对你有帮助

.animate.ng-enter,
.animate.ng-leave {
    position: absolute;
}

.animate.ng-enter {
    -moz-transition: ease-out all 0.3s 0.4s;
    -o-transition: ease-out all 0.3s 0.4s;
    -webkit-transition: ease-out all 0.3s 0.4s;
    transition: ease-out all 0.3s 0.4s;
}


.animate.ng-leave {
    -moz-transition: 0.3s ease-out all;
    -o-transition: 0.3s ease-out all;
    -webkit-transition: 0.3s ease-out all;
    transition: 0.3s ease-out all;
}

.animate.ng-enter,
.animate.ng-leave.ng-leave-active {
    left: 2em;
    opacity: 0;
}

.animate.ng-leave,
.animate.ng-enter.ng-enter-active {
    left: 0;
    opacity: 1;
}

【讨论】：