如何應用ng-enter angularjs動畫

我試圖對指令應用簡單的不透明度轉換，但它沒有做任何事情。下面是代碼：如何應用ng-enter angularjs動畫

WelcomeDirective.js

(function() { 
    "use strict"; 

    angular.module("myModule") 
     .directive("wamWelcome", Welcome); 

    Welcome.$inject = ["$animate"]; 

    function Welcome($animate) { 
     return { 
      restrict: "E", 
      templateUrl: "shared/directives/welcomeMessage/WelcomeTemplate.html", 
      link: function(scope, element, attrs) { 
       $animate.addClass(element, "welcome"); 
      } 
     }; 
    } 

})();

WelcomeTemplate.js

/* Animations */ 

/* Add animation */ 
.welcome.ng-enter { 
    opacity: 1; 
    -webkit-transition: opacity 300ms linear; 
    transition: opacity 300ms linear; 
} 

/* Remove animation */ 
.welcome.ng-leave { 
    opacity: 0; 
    -webkit-transition: opacity 300ms linear; 
    transition: opacity 300ms linear; 
} 

</style> 

<div id="welcome-panel" class="alert alert-info alert-dismissible" role="alert" ng-if="profile.welcome"> 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
    <strong>Welcome</strong> 
</div>

如果I'm正確認識它，當模板進入，角應適用的動畫。

來源

2015-06-01 Juan Moreno

你已經包含了ngAnimate模塊？ 'angular.module（'myModule'，['ngAnimate']' – devqon

是的，它包括 –

我對這個問題並不清楚，但我在這裏給出了一個在angularjs中動畫的完整示例，我使用了ng-enter和ng-leave。請通過代碼。

HTML部分：

<!DOCTYPE html> 
<html ng-app="animTodo"> 
<head> 
<meta name="description" content="A demonstration Animation" /> 
    <meta charset=utf-8 /> 
    <title>Angular 1.2 and Animate.css</title> 
    <link rel="stylesheet" href="//djyhxgczejc94.cloudfront.net/frameworks/bootstrap/3.0.0/themes/white-plum/bootstrap.min.css"> 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/2.0/animate.min.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular-animate.min.js"></script> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
</head> 
<body ng-controller="TodoCtrl"> 
    <div class="container"> 
    <h1 class="page-header text-center">Animate.css + Angular 1.2</h1> 

    <form ng-submit="addTodo(newTodo)"> 
     <input type="text" ng-model="newTodo" class="form-control" placeholder="New todo item goes here, then press Enter" focus> 
    </form> 
    <br> 

    <div class="list-group"> 
     <div class="list-group-item todo-item" ng-repeat="item in items" ng-class="{'todo-complete': item.complete}"> 
     <span class="close" ng-click="removeTodo($index)">&times;</span> 
     <label> 
      <input type="checkbox" ng-model="item.complete"> 
      <span ng-bind="item.text">This is the content of the Todo</span> 
     </label> 
     </div> 
    </div> 
    <button class="btn btn-block btn-danger" ng-click="clearAll()">Clear All Items</button> 
    </div> 
</body> 
</html>

CSS文件：

.todo-item { 
    -webkit-transition: color 0.6s, background-color 0.3s; 
    -moz-transition: color 0.6s, background-color 0.3s; 
    -ms-transition: color 0.6s, background-color 0.3s; 
    transition: color 0.6s, background-color 0.3s; 

    label { 
    display: block; 
    } 

    &.ng-enter { 
    -webkit-animation: fadeInLeft 1s; 
    -moz-animation: fadeInLeft 1s; 
    -ms-animation: fadeInLeft 1s; 
    animation: fadeInLeft 1s; 
    } 

    &.ng-leave { 
    -webkit-animation: bounceOut 1s; 
    -moz-animation: bounceOut 1s; 
    -ms-animation: bounceOut 1s; 
    animation: bounceOut 1s; 
    } 
} 

.todo-complete { 
    background: #f3f3f3; 
    color: #777; 

    label { 
    text-decoration: line-through; 
    } 
}

腳本部分：

var app = angular.module("animTodo", ["ngAnimate"]); 

app.controller("TodoCtrl", function($scope) { 
    $scope.items = [{text: "This is a demo todo.", complete: true}]; 
    $scope.newTodo = ""; 

    $scope.addTodo = function() { 
    $scope.items.push({text: $scope.newTodo, complete: false}); 
    $scope.newTodo = ""; 
    }; 

    $scope.removeTodo = function(index) { 
    $scope.items.splice(index, 1); 
    }; 

    $scope.clearAll = function() { 
    $scope.items = []; 
    }; 
});

這裏工作Plunker鏈接：Plunker

來源

2015-06-01 13:31:08

如何應用ng-enter angularjs動畫

回答

相關問題