Angularjs 当指令出现在页面上时，设置其动画
我试图在使用ngAnimate单击按钮时将一个指令动画化到页面中。 如何为以下代码执行此操作 我一直在努力学习：的例子，但不明白如何让它起作用 如有任何帮助，将不胜感激：Angularjs 当指令出现在页面上时，设置其动画,angularjs,ng-animate,Angularjs,Ng Animate,我试图在使用ngAnimate单击按钮时将一个指令动画化到页面中。 如何为以下代码执行此操作 我一直在努力学习：的例子，但不明白如何让它起作用 如有任何帮助，将不胜感激： <!doctype html> <html> <head> <title>Search Test</title> <script type="text/javascript" src="bower_components/jquery/d
<!doctype html>
<html>
<head>
<title>Search Test</title>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="script/search.js"></script>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background: red;
margin: 10px;
display: inline-block;
}
.box.ng-enter,
.box.ng-leave {
transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}
.box.ng-leave.ng-leave-active,
.box.ng-enter {
opacity: 0;
}
.box.ng-enter.ng-enter-active,
.animate.ng-leave {
opacity: 1;
}
</style>
</head>
<body ng-app="searchApp">
<div ng-controller="searchCtrl">
<input type="text" placeholder="search" ng-model="$scope.name" />
<ul>
<li class="animate" ng-repeat="name in names | filter:$scope.name"
ng-animate= "'animate'">{{name}}
</li>
</ul>
</div>
<button add-box>Add box</button>
<div id="box-container">
</div>
</body>
</html>
<div class="box"></div>
<div class="box" ng-if="show"></div>
var searchApp = angular.module("searchApp", ["ngAnimate"]);
searchApp.controller("searchCtrl",function($scope) {
$scope.names = ['Sally', 'Kelly', 'Edward', 'Grey', 'Antonia'];
});
searchApp.directive("box", function() {
return {
restrict: 'E',
templateUrl: "box.html"
};
});
searchApp.directive("addBox", function($compile){
return function($scope, element, attrs){
element.bind("click", function(){
angular.element(document.getElementById("box-container")).append($compile("<box></box>")($scope));
});
};
});
我能用ngIf解决这个问题 search.js
$scope.show = true;
<div class="box"></div>
<div class="box" ng-if="show"></div>