부모가 전환 할 때의 어린이의 각도 애니메이션

부모가 전환 될 때 어떻게 어린이 애니메이션을 적용 할 수 있습니까?부모가 전환 할 때의 어린이의 각도 애니메이션

스 니펫을 실행하면 컨테이너를 켜기/끄기로 전환 할 수 있지만 자식은 자동으로 애니메이션을 적용하지 않고 표시됩니다. 그러나 상자에 입력하면 애니메이션으로 표시됩니다.

부모가 나타날 때 아이들에게 애니메이션을 적용하고 싶습니다.

저는 입구 애니메이션이 아니라 출구와 관련이 있습니다.

Plunker :

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>

출처

2016-07-18 SoluableNonagon

당신은 같은 규칙이 필요'.ng 입력 .childClass을 {}'당신이 작업 예제를 제공 할 수 – charlietfl

@charlietfl? – SoluableNonagon

http://plnkr.co/edit/wMNHyPMFEUZBjwAyNekj?p=preview이 같은 시도, 희망이 도움이 될 것입니다.

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>

출처

2016-07-19 15:11:04 Deep

부모가 전환 할 때의 어린이의 각도 애니메이션

답변

관련 문제