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-动画=＆＃34; AM-倒装X＆＃34;

这是我翻转的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 }]);

以下是角度，角度带，jquery，角度动画的参考资料：

 <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都存在一些问题：

确保加载正确版本的ngAnimate和ngRoute。在您的问题中，您有Angular 1.3.15，但您正在使用1.4版本候选者进行动画和路由。
确保您正在为动画加载样式表（我无法告诉您，因为您没有演示一些代码段）。
您需要将类添加到要设置动画的元素。
对于关键帧动画，您不能使用“活跃”动画。 class，称为目标CSS类，因为关键帧将负责动画。
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;
}

角动画根本不起作用

1 个答案:

Plunker Demo