Ảnh động trong AngularJS ng-show

Question

Tôi đang cố gắng để có được một yếu tố ng-show để tạo hiệu ứng khi nó trở nên có thể nhìn thấy/ẩn. Nhưng nó chỉ hoạt động như một chương trình ng-show bình thường, được hiển thị/ẩn.

Tôi đã tìm thấy ví dụ này: http://jsfiddle.net/Kx4TS/1/ hoạt động tốt.

chưa, nếu tôi sử dụng cùng thuộc tính ng-animate và cùng một css, nó không hoạt động trong trường hợp của tôi. Tôi có cần phải làm gì khác hoặc các trường hợp hoạt ảnh không hoạt động?

mã của tôi trông như thế này:

<div style="" ng-show="item.hasMax()" 
    class="box" ng-animate="{show: 'fadeIn', hide:'fadeOut'}"> 

và css là:

.fadeIn-setup,.fadeOut-setup { 
      -webkit-transition: 1s linear opacity; 
      -moz-transition: 1s linear opacity; 
      -o-transition: 1s linear opacity; 
      transition: 1s linear opacity; 
     } 
    .fadeIn-setup{ 
     opacity:0; 
    } 
    .fadeOut-setup{ 
     opacity:1; 
    } 
    .fadeIn-setup.fadeIn-start { 
     opacity: 1; 
    } 
    .fadeOut-setup.fadeOut-start{ 
     opacity:0; 
    } 

Ngoài ra, là nó có thể làm cho ng-Animate làm công cụ như các hình ảnh động jquery slideDown/slideUp?

Answer 1

Ví dụ fiddle sử dụng Phiên bản góc 1.1.4. Hãy chắc chắn rằng bạn cũng có một phiên bản mới hơn của góc có sẵn. Tôi đề nghị bạn nên có phiên bản mới nhất. Ngay bây giờ nó là 1.1.5, trong đó có một số sửa lỗi quan trọng.

Answer 2

Cách tiếp cận hoạt ảnh đã thay đổi với Góc 1.2. Đây là một bài báo (year of moo post) giải thích sự khác biệt. Nó đơn giản hơn nhiều bây giờ - không yêu cầu ng-animate.