如何应用ng-enter angularjs动画

Z时代
2024-01-10
分类：问答

我试图对指令应用简单的不透明度转换，但它没有做任何事情。下面是代码：如何应用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> 
    <span>Welcome</span> 
</div>

如果I'm正确认识它，当模板进入，角应适用的动画。

回答：

我对这个问题并不清楚，但我在这里给出了一个在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 = []; 
    }; 
});