Question

我正在为我的SPA创建一个天气模块 Angular 1.4 ，当用户点击一个按钮检索他们的预测时，尝试淡出我的视图。城市。

我已将ngAnimate模块注入到我的应用程序中，并尝试编写一些CSS以及javascript。但是，无论我尝试什么，动画都不起作用！也许我错过了动画如何以角度运作的一些基本概念？

这是我的CSS：

        .animate-enter, 
        .animate-leave { 
            -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
            -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
            -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
            -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
            transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
            position: relative;
            display: block;
            overflow: hidden;
            text-overflow: clip;
            white-space:nowrap;
        } 

        .animate-leave.animate-leave-active,
        .animate-enter {
            opacity: 0;
            width: 0px;
            height: 0px;
        }

        .animate-enter.animate-enter-active, 
        .animate-leave {
            opacity: 1;
            width: 150px;
            height: 30px;
            opacity: 1;
        }

这是我的主要页面，我的观点会被引入：

<body>

    <header>
        <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">AngularJS Weather</a>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/" id="home"><i class="fa fa-home"></i> Home</a></li>
            </ul>
        </div>
        </nav>
    </header>

    <div class="container" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" ng-view></div>

</body>

我的app.js：

    var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource', 'ngAnimate']);

weatherApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'pages/home.html',
        controller: 'homeController'
    })
    .when('/forecast', {
        templateUrl: 'pages/forecast.html',
        controller: 'forecastController'
    })
    .when('/forecast/:days', {
        templateUrl: 'pages/forecast.html',
        controller: 'forecastController'
    })
    .otherwise({redirectTo: '/'})
}])

视图示例：

<div class="home row">
<div class="col-md-6 col-md-offset-3">
    <h4>Forecast by City</h4>
    <div class="form-group">
        <input type="text" ng-model="city" class="form-control" />
    </div>
    <a href="#/forecast" class="btn btn-primary">Get Forecast &raquo;</a>
</div>

Answer 1

好的，所以我最终搞清楚了。这比我制作它容易得多！

您要做的第一件事就是将ngAnimate 注入您的应用程序中，如下所示：
var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource', 'ngAnimate']);

< / LI>
为您的动画创建CSS类，就像为非角色/ javascript网站或应用程序一样：
.days { padding: 5px 8px 5px 8px; } .home, .forecast { position: absolute; width: 100%; } @keyframes fadeIn { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 50% { opacity: .5; } 100% { opacity: 0; } } @keyframes slideOutLeft { to { transform: translateX(-100%); } } @keyframes slideInRight { from { transform:translateX(100%); } to { transform: translateX(0); } } .ng-enter { animation: slideInRight 0.5s both linear, fadeIn 0.5s both linear; z-index: 8888;} .ng-leave { animation: slideOutLeft 0.5s both linear, fadeOut 0.5s both linear; z-index: 9999;}
正常使用您的视图，让ngAnimate处理脏细节！ ngAnimate会自动检测视图何时处于ng-enter状态或ng-leave状态。 这意味着当这些课程应用于您的进入/离开视图时，动画将被选中！

<div class="container-fluid" ng-view></div>

AngularJS淡入淡出视图

1 个答案: