Css 角度动画根本不起作用

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

这是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> 

以及： ng animate=“am-flip-x”

以下是我的翻转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>

标记和CSS都有几个问题：

确保您正在加载正确版本的ngAnimate和ngRoute。在您的问题中，您使用的是Angular 1.3.15，但您使用的是1.4版本候选动画和路线

确保您正在加载动画的样式表（我说不出来，因为您没有演示，只有一些片段）

您需要将类添加到要设置动画的元素中

对于关键帧动画，不使用“活动”类（称为目标CSS类），因为关键帧将负责动画

如果只设置进入和离开的动画，则为ng。您可以在文档的表格中看到指令支持：

HTML:

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

/*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;
}

---

你能创建一个plunkr吗？@jax，jme11让我走上了正确的道路谢谢，只是我的版本把我弄得一团糟谢谢allot的帮助问题似乎是文件的版本差异，我忘了在片段中添加关键帧。但是剩下的一切都很好，添加了正确的版本，并将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;
}