Ngắt hoạt hình trong góc 1.4

Question

Tôi đang gắn kết để đạt được Hoạt ảnh trong Angular JS 1.4.0, mà tôi muốn tương tự với hình ảnh có thể tìm thấy trên trang này (Góc 1.1.5): http://www.nganimate.org/angularjs/ng-repeat/move

Như tôi đã hiểu, đã có những thay đổi lớn đối với ngAnimate trong vài phiên bản gần đây nhất.

Tôi đã tạo lại phần quan trọng trong ứng dụng của mình với Plunkr. Nó có thể được tìm thấy ở đây http://plnkr.co/edit/9DK3LEAaGDgDT2kIILjG?p=preview

Tôi muốn các mục, hiển thị và ẩn, vì đầu vào bộ lọc khác, được làm động bằng hoạt ảnh css.

Đây là đầu vào bộ lọc của tôi:

<input type="text" class="form-control" ng-model="search"> 

Và đây là danh sách, trong đó tất cả các yếu tố từ việc tìm kiếm xuất hiện.

<ul> 
    <li ng-class="item" ng-repeat="name in people | filter:search"> 
     <a href="#"> {{name.name}} </a> 
    </li> 
</ul> 

Dưới đây là hình ảnh động CSS của tôi:

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

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

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

Việc tìm kiếm và bộ lọc hoạt động tốt, nhưng các hình ảnh động CSS không được kích hoạt.

Tôi sẽ rất vui vì nếu ai đó có giải pháp cho vấn đề này!

Answer 1

Phiên bản mới nhất như góc 1.4 phương pháp này hơi khác một chút. Trước hết bạn nên bao gồm js animate góc cạnh.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-animate.js"></script> 

Sau đó, bạn nên tiêm 'ngAnimate' vào mô-đun như thế này.

var app = angular.module('myApp', ['ngAnimate']); 

cũng sử dụng lớp như thế này trong cùng với ng-reapeat

<li class="animate-repeat" ng-repeat="friend in friends | filter:q as results"> 

cũng sử dụng css cho Animate như dưới đây

.animate-repeat { 
    line-height:40px; 
    list-style:none; 
    box-sizing:border-box; 
} 

.animate-repeat.ng-move, 
.animate-repeat.ng-enter, 
.animate-repeat.ng-leave { 
    -webkit-transition:all linear 0.5s; 
    transition:all linear 0.5s; 
} 

.animate-repeat.ng-leave.ng-leave-active, 
.animate-repeat.ng-move, 
.animate-repeat.ng-enter { 
    opacity:0; 
    max-height:0; 
} 

.animate-repeat.ng-leave, 
.animate-repeat.ng-move.ng-move-active, 
.animate-repeat.ng-enter.ng-enter-active { 
    opacity:1; 
    max-height:40px; 
} 

more references