Question

使用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属性。

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

Answer 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;
}

Angular 1.2.12和ng-view动画

1 个答案: