Question

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

如果您运行代码段，则可以打开和关闭容器，但子项不会自动设置动画，它们只会出现。但是当你在盒子里输入时，你可以看到它们的动画效果。

我希望孩子们在父母出现的同时进行动画制作。

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

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>

Answer 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>

父级切换时孩子的AngularJS动画

1 个答案: