Question

我正在尝试使用ngAnimate单击按钮时将指令设置为动画。我如何为以下代码执行此操作？

我一直在尝试关注以下示例：http://www.nganimate.org/angularjs/tutorial/how-to-make-animations-with-angularjs但无法理解如何使其有效。

任何帮助都将受到高度赞赏：）

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

Box.html

<div class="box"></div>

Search.js

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));
        });
    };
});

Answer 1

我能够使用ngIf解决这个问题

search.js

$scope.show = true;

Box.html

<div class="box" ng-if="show"></div>

我为此解决方案阅读了http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#how-to-make-animations-in-angularjs

当指令出现在页面上时为其设置动画

1 个答案: