父母切换时孩子的AngularJS动画答案

【问题标题】：AngularJS animation of children when parent toggled父母切换时孩子的AngularJS动画
【发布时间】：2016-07-19 23:11:04
【问题描述】：

当父级切换时如何为子级设置动画？

如果您运行 sn-p，您可以打开和关闭容器，但子项不会自动设置动画，它们只会出现。但是当您在框中输入内容时，您可以看到它们的动画。

我希望当父母也出现时，孩子也能制作动画。

我只关心入口动画，而不是出口。

Plunker：http://plnkr.co/edit/wMNHyPMFEUZBjwAyNekj?p=preview

angular.module('MyApp', ['ngAnimate']);

.repeat-animation {
  box-sizing:border-box;
  line-height:20px;
  border:1px solid #ddd;
}

.repeat-animation.ng-enter-stagger,
.repeat-animation.ng-leave-stagger,
.repeat-animation.ng-move-stagger {
  /* 200ms will be applied between each sucessive enter operation */ 
  -webkit-transition-delay:0.2s;
  transition-delay:0.2s;
}

.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
}

.repeat-animation.ng-leave.ng-leave-active,
.repeat-animation.ng-enter,
.repeat-animation.ng-move {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;

  opacity:0;
  line-height:0;
}

.repeat-animation.ng-leave,
.repeat-animation.ng-move.ng-move-active,
.repeat-animation.ng-enter.ng-enter-active {
  opacity:1;
  line-height:20px;
}

<!doctype html>
<html ng-app="MyApp">
<head>
<script type="text/javascript" src="http://code.angularjs.org/1.2.5/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.5/angular-animate.js"></script>
</head>
<body>
  
<div ng-if='show'>
  <div ng-init="items=['a','b','c','d','e','x']">
    <input placeholder="filter" ng-model="f" />
    <div ng-repeat="item in items | filter:f" class="repeat-animation">
      {{item}}
    </div>
  </div>
</div>

<button ng-click='show =! show'> Show Toggle </button>
</body>
</html>

【问题讨论】：

你需要像.ng-enter .childClass{}这样的规则
@charlietfl 你能提供一个可行的例子吗？

标签： javascript css angularjs animation

【解决方案1】：

试试这个，希望对你有帮助。

   angular.module('demo', [
  'ngAnimate'
]).controller('MainCtrl', function($scope) {
  
  $scope.items=['a','b','c','d','e','x'];
  $scope.show = false;
  $scope.search = "";
  $scope.toggle = function()
  {
$scope.show = !$scope.show;
  };
  
});

.repeat-animation {
  box-sizing:border-box;
  line-height:20px;
  border:1px solid #ddd;
}

.repeat-animation.ng-enter-stagger,
.repeat-animation.ng-leave-stagger,
.repeat-animation.ng-move-stagger {
  /* 200ms will be applied between each sucessive enter operation */ 
  -webkit-transition-delay:0.2s;
  transition-delay:0.2s;
}

.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
}

.repeat-animation.ng-leave.ng-leave-active,
.repeat-animation.ng-enter,
.repeat-animation.ng-move {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;

  opacity:0;
  line-height:0;
}

.repeat-animation.ng-leave,
.repeat-animation.ng-move.ng-move-active,
.repeat-animation.ng-enter.ng-enter-active {
  opacity:1;
  line-height:20px;
}

<!doctype html>
<html ng-app="demo">
<head>
<script type="text/javascript" src="http://code.angularjs.org/1.2.5/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.5/angular-animate.js"></script>
</head>

<body ng-controller="MainCtrl">
   
<input ng-show="show" placeholder="filter" ng-model="search" />
<div ng-if="show" ng-repeat="item in items | filter:search" class="repeat-animation">
{{item}}
</div>
<button ng-click='toggle()'> Show Toggle </button>
   
</body>  


</html>

【讨论】：