Question

在向我的列表中添加项目时，我无法使用动画。

HTML：

<html ng-app="App">
<head>
  <meta charset="utf-8">
  <title>Top Animation</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  <script src="https://code.angularjs.org/1.4.4/angular.js"></script>
  <script src="https://code.angularjs.org/1.4.4/angular-animate.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="Ctrl">
  <div class="well" style="margin-top: 30px; width: 200px; overflow: hidden;">
    <form class="form-search"> 
      <input type="button" ng-click="click()" class="btn" value="Add more"/>
        <div class="input-append">
          <input type="text" ng-model="search" class="search-query" style="width: 80px">
          <button type="submit" class="btn">Search</button>
        </div>
        <ul class="nav nav-pills nav-stacked">
          <li ng-repeat="name in names | filter:search" class="row1">
            <a href="#"> {{name}} </a>
          </li> 
      </ul>
    </form>
  </div>
</body>
</html>

JS：

var app = angular.module('App', ['ngAnimate']);
app.controller('Ctrl',['$scope', ctrl]);

function ctrl($scope){
   $scope.search = "";
  $scope.names=['Igor Minar', 'Brad Green', 'Dave Geddes', 'Naomi Black', 'Greg Weber', 'Dean Sofer', 'Wes Alvaro', 'John Scott', 'Daniel Nadasi'];

  $scope.click = function(){
    $scope.names.push(Math.random()*1000);
  }

}

CSS：

.row1.animate-enter, 
.row1.animate-leave
{ 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
    overflow: hidden;
    text-overflow: clip;
    white-space:nowrap;
} 

.row1.animate-leave.animate-leave-active,
.row1.animate-enter {
    opacity: 0;
    width: 0px;
    height: 0px;
}

.row1.animate-enter.animate-enter-active, 
.row1.animate-leave {
    opacity: 1;
    width: 150px;
    height: 30px;
}

Plunkr

Answer 1

您需要为CSS类使用ng-命名空间（而不是animate）：

.row1.ng-enter, 
.row1.ng-leave
{ 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
    overflow: hidden;
    text-overflow: clip;
    white-space:nowrap;
} 

.row1.ng-leave.ng-leave-active,
.row1.ng-enter {
    opacity: 0;
    width: 0px;
    height: 0px;
}

.row1.ng-enter.ng-enter-active, 
.row1.ng-leave {
    opacity: 1;
    width: 150px;
    height: 30px;
}

无法在Angular 1.4.4中使用ng-repeat动画

1 个答案: