AngularJS 애니메이션이 표시되지 않습니다.

내 angularjs 앱에서 애니메이션을 사용하려고합니다. 그러나 나는 그것을 작동시킬 수 없습니다 - 각도가 작동하지만 애니메이션이 보이지 않습니다. http://plnkr.co/edit/wHnztwWmOf95uGfQ0FBd?p=preview AngularJS 애니메이션이 표시되지 않습니다.

당신에 유래 내 코드를 볼 것을 선호하는 경우 다음 여기있다 :

index.html을 :

<!doctype 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="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-animate.js"></script> 
    <script src="app.js"></script> 
</head> 

<body> 
    <div ng-init="names=['Igor Minar', 'Brad Green', 'Dave Geddes', 'Naomi Black', 'Greg Weber', 'Dean Sofer', 'Wes Alvaro', 'John Scott', 'Daniel Nadasi'];"> 
    <div class="well" style="margin-top: 30px; width: 200px; overflow: hidden;"> 
     <form class="form-search"> 
     <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-animate="'animate'" ng-repeat="name in names | filter:search"> 
      <a href="#"> {{name}} </a> 
      </li> 
     </ul> 
     </form> 
    </div> 
    </div> 
</body> 
</html>

app.js 여기

내 모든 코드와 plnkr입니다 :

(function() { 
    'use strict'; 

    var app = angular.module('app', [ 
     // Angular modules 
     'ngAnimate',  // animations 
    ]); 
})();

style.css :

.animate-enter, 
.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; 
} 

.animate-enter.animate-enter-active, 
.animate-leave { 
    opacity: 1; 
    top: 0; 
    height: 30px; 
} 

.animate-leave.animate-leave-active, 
.animate-enter { 
    opacity: 0; 
    top: -50px; 
    height: 0px; 
}

출처

2014-11-29 JensOlsen112

각도 1.3의 애니메이션이 변경되었습니다. Here은 애니메이션이 작동하는 업데이트 된 플 런커입니다. 더 자세한 정보 here에서 내가 애니메이션을 복사 한 곳입니다. :-)

ng-repeat here에 대한 문서.

<li class="animate-repeat" ng-repeat="name in names | filter:search"> 
     <a href="#"> {{name}} </a> 
     </li>

출처

2014-11-29 15:17:16

아 나는 몰랐다. 고마워요! – JensOlsen112

AngularJS 애니메이션이 표시되지 않습니다.

답변

관련 문제