如何应用angularjs的ng-enter动画

我试图应用一个简单的不透明度过渡到一个指令，但它没有做任何事情。下面是代码:

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>

如果我理解正确的话，当模板进入时，angular应该应用动画

我不清楚这个问题，但我在这里给出了一个完整的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

相关内容

最新更新

热门标签：