css - Angular 动画根本不起作用

Question

我似乎根本无法让我的动画工作。 下面是我的代码，我曾尝试更改也没有帮助的版本。

这是 html:

<div>
    <ul class="nav nav-pills nav-sm nav-no-br mb10" id="flightChooseTab">
        <li ng-class="{ 'active' : Register != true }">
            <a ng-click="Register = false">Login</a>
        </li>
        <li ng-class="{ 'active' : Register == true }">
            <a ng-click="Register = true" class="">New User</a>
        </li>
    </ul>
</div>
<div class="row">
    <div class="col-md-4" ng-animate="'am-flip-x'" ng-if="Register != true">
        <div class="form-group form-group-icon-left">
            <i class="fa fa-user input-icon input-icon-show"></i>
            <label>Email</label>
            <input class="form-control" placeholder="e.g. johndoe@gmail.com" type="text" />
        </div>
        <div class="form-group form-group-icon-left">
            <i class="fa fa-lock input-icon input-icon-show"></i>
            <label>Password</label>
            <input class="form-control" type="password" placeholder="my secret password" />
        </div>
        <input class="btn btn-primary" type="submit" value="Sign in" />
    </div>
    <div class="col-md-4" ng-animate="'am-flip-x'" ng-if="Register == true">
        <div class="form-group form-group-icon-left">
            <i class="fa fa-user input-icon input-icon-show"></i>
            <label>Full Name</label>
            <input class="form-control" placeholder="e.g. John Doe" type="text" />
        </div>
        <div class="form-group form-group-icon-left">
            <i class="fa fa-envelope input-icon input-icon-show"></i>
            <label>Emai</label>
            <input class="form-control" placeholder="e.g. johndoe@gmail.com" type="text" />
        </div>
        <div class="form-group form-group-icon-left">
            <i class="fa fa-lock input-icon input-icon-show"></i>
            <label>Password</label>
            <input class="form-control" type="password" placeholder="my secret password" />

            <i class="fa fa-lock input-icon input-icon-show"></i>
            <label>Repeat Password</label>
            <input class="form-control" type="password" placeholder="my secret password" />
        </div>
        <input class="btn btn-primary" type="button" value="Sign up" />
    </div>
</div> 

我也试过改用这种方法:

class="col-md-4 am-flip-x" 

和: ng-animate="am-flip-x"

这是我的 flip CSS:

.am-flip-x {
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}

.am-flip-x.am-flip-x-add,
.am-flip-x.ng-hide-remove,
.am-flip-x.ng-move {
  -webkit-animation-name: flipInXBounce;
          animation-name: flipInXBounce;
}
.am-flip-x.am-flip-x-remove,
.am-flip-x.ng-hide {
  -webkit-animation-name: flipOutX;
          animation-name: flipOutX;
}
.am-flip-x.ng-enter {
  visibility: hidden;
  -webkit-animation-name: flipInXBounce;
          animation-name: flipInXBounce;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.am-flip-x.ng-enter.ng-enter-active {
  visibility: visible;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.am-flip-x.ng-leave {
  -webkit-animation-name: flipOutX;
          animation-name: flipOutX;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.am-flip-x.ng-leave.ng-leave-active {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

我的应用程序代码已初始化:

var myApp = angular.module('myApp', ['ngAnimate', 'ui.bootstrap', 'ngRoute', 'ui-rangeSlider',  'infinite-scroll', 'mgcrea.ngStrap', 'mgcrea.ngStrap.helpers.dimensions', 'mgcrea.ngStrap.helpers.dateParser', 'ng-multi-select', "revolunet.stepper"]).controller('HomeController', ["$scope", "$http", "$location", "$filter", function ($scope, $http, $location, $filter) { //Code Here }]);

以下是我对 angular、angular strap、jquery、angular 动画的引用:

 <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script  src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular-animate.min.js"></script>

<script  src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.4/angular-strap.min.js"></script>
<script  src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.4/angular-strap.tpl.min.js"></script>

Answer 1

Plunker Demo

您的标记和 CSS 都存在一些问题:

1. 确保您正在加载正确版本的 ngAnimate 和 ngRoute。在您的问题中，您使用的是 Angular 1.3.15，但您使用的是 1.4 候选发布版的动画和路由。
2. 确保您正在加载动画的样式表(我无法判断，因为您没有演示，只有一些片段)。
3. 您需要将类添加到要设置动画的元素。
4. 对于关键帧动画，您不使用称为 objective-c SS 类的“事件”类，因为关键帧将负责动画。
5. ng-如果只有动画进入和离开。您可以在文档的表格中看到指令支持:https://docs.angularjs.org/api/ngAnimate .

HTML:

<div class="col-md-4 am-flip-x" ng-if="register !== true">

CSS:

/*additional css and animation keyframes omitted for brevity*/
.am-flip-x {
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}

.am-flip-x.ng-enter {
  -webkit-animation-name: flipInX;
          animation-name: flipInX;
}
.am-flip-x.ng-leave {
  -webkit-animation-name: flipOutX;
          animation-name: flipOutX;
}