親がトグルしたときの子のAngularJSアニメーション

親がトグルされたときに、どのように子をアニメーション化するのですか？親がトグルしたときの子のAngularJSアニメーション

スニペットを実行すると、コンテナのオンとオフを切り替えることができますが、子は自動的にアニメーション化されず、表示されます。しかし、ボックスに入力すると、それらのアニメーションが表示されます。

親が表示されたときに子供にアニメーションをさせていただきたいと思います。

私は入口のアニメーションだけに関心があり、出口ではありません。

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>

出典

2016-07-18 SoluableNonagon

あなたは '.ng-入力.childClass {}' – charlietfl

@charlietflは、あなたが作業例を提供できるようなルールが必要ですか？ – SoluableNonagon

これが役立つことを願って、このようにしてください。

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

親がトグルしたときの子のAngularJSアニメーション

答えて

関連する問題