AngularJS:如何将每个元素的动画放置在ngview上

Question

是否有一种方法可以在输入时动画ngview的每个内容，而不是视图（div）本身？

Answer 1

除了使用过渡API的动画编写自定义CS之外，没有其他方法可以动画化（过渡：所有线性0.5S;）CSS的动画ng-show/ng-hide或使用ng-view这是官方Angularjs API文档的内容：

<div ng-controller="MainCtrl as main">
  Choose:
  <a href="Book/Moby">Moby</a> |
  <a href="Book/Moby/ch/1">Moby: Ch1</a> |
  <a href="Book/Gatsby">Gatsby</a> |
  <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
  <a href="Book/Scarlet">Scarlet Letter</a><br/>
  <div class="view-animate-container">
    <div ng-view class="view-animate"></div>
  </div>
  <hr />
  <pre>$location.path() = {{main.$location.path()}}</pre>
  <pre>$route.current.templateUrl = {{main.$route.current.templateUrl}}</pre>
  <pre>$route.current.params = {{main.$route.current.params}}</pre>
  <pre>$routeParams = {{main.$routeParams}}</pre>
</div>

CSS：

.view-animate-container {
  position:relative;
  height:100px!important;
  background:white;
  border:1px solid black;
  height:40px;
  overflow:hidden;
}
.view-animate {
  padding:10px;
}
.view-animate.ng-enter, .view-animate.ng-leave {
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  display:block;
  width:100%;
  border-left:1px solid black;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:10px;
}
.view-animate.ng-enter {
  left:100%;
}
.view-animate.ng-enter.ng-enter-active {
  left:0;
}
.view-animate.ng-leave.ng-leave-active {
  left:-100%;
}

来源：Angular Docs