Question

我知道这是一个众所周知的问题，在这个论坛上被多次询问过，但我找不到好的答案。

var aniApp = angular.module("aniApp", []);

aniApp.controller('mainCtrl', ['$scope',
  function($scope) {
    $scope.currentStep = 1;

    $scope.show = function(step) {
      $scope.currentStep = step;
    }
  }
]);

.step-box {
  width: 200px;
  border: solid 1px silver;
  padding: 20px;
}
.animate-show {
  width: 200px;
  border: solid 1px silver;
  padding: 20px;
}
.animate-show.ng-hide-remove,
.animate-show.ng-hide-add {
  display: block!important;
}
.animate-show.ng-hide-add {
  animation: 1s flyOut;
}
.animate-show.ng-hide-remove {
  animation: 1s flyIn;
}
@keyframes flyIn {
  from {
    left: 600px;
  }
  to {
    left: 0;
  }
}
@keyframes flyOut {
  from {
    left: 0;
  }
  to {
    left: -600px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="aniApp">
  <div ng-controller="mainCtrl">
    <div ng-show="currentStep === 1" class="step-box animate-show">
      showing step 1
    </div>
    <div ng-show="currentStep === 2" class="step-box animate-show">
      showing step 2
    </div>
    <div ng-show="currentStep === 3" class="step-box animate-show">
      showing step 3
    </div>
    <br/>
    <a href="#" ng-click="show(1)">One</a>&nbsp;
    <a href="#" ng-click="show(2)">Two</a>&nbsp;
    <a href="#" ng-click="show(3)">Three</a>
  </div>
</div>

这是我的傻瓜：

http://plnkr.co/edit/q11n9F?p=preview

在框内，我希望文本从右边进入，然后从左边出来。这应该很容易但我已经用了一整天： - （

谁能明白为什么这不起作用？

Answer 1

您必须使用角度ng-animate模块添加脚本标记，因为它不是角度核心的一部分，您必须将角度ng-animate模块作为应用程序的依赖项注入。

在你的HTML中：

//After angular.min script tag
<script src="https://code.angularjs.org/1.2.23/angular-animate.min.js"></script>

在你的js中：

  var aniApp = angular.module("aniApp", ['ngAnimate']);

我无法为ng-show / ng-hide动画制作动画

1 个答案: