hoạt hình kiễu góc

Question

Tại thời điểm tôi có dòng mã này ngay trong một bộ điều khiển ng nhấp chuột

$(".message").show(300).delay(900).hide(300);

và trong khi nó hoạt động hoàn toàn tốt Tôi đã nói rằng tôi không bao giờ phải làm hình ảnh động/jQuery/Thao tác DOM từ bên trong bộ điều khiển. Có một cách khác để làm điều này mà không liên quan đến một số lượng vô lý của rối tung xung quanh?

Answer 1

Viết một chỉ thị đơn giản mà xem thuộc tính của nó:

app.directive('animateMe', function() { 
    return function(scope, element, attrs) { 
     scope.$watch(attrs.animateMe, function() { 
     element.show(300).delay(900).hide(300); 
     }) 
    } 
}) 

Đặt chỉ thị rằng trên phần tử HTML mà bạn muốn để animate. Có ng-click chuyển đổi một thuộc tính model/scope.

<a ng-click="animateToggle = !animateToggle">animate</a> 
<div animate-me="animateToggle">...</div> 

Mã khác, vâng. Nhưng bây giờ bạn có một cái gì đó có thể tái sử dụng (và bạn không cần bộ chọn).

Fiddle

Trong fiddle, tôi đã thêm ng-hide để div để nó không xuất hiện ban đầu.

---

Cập nhật: 1.1.4
góc hiện nay có một chỉ thị ngAnimate. Mặc dù nó không linh hoạt như viết chỉ thị hoạt hình của riêng bạn, nó sẽ xử lý nhiều kịch bản. Chỉ thị ng-show (và ng-ẩn) hỗ trợ show và hideanimation methods.

Answer 2

Tôi khuyên bạn nên sử dụng chỉ thị ngAnimate mới được cung cấp trong AngularJS 1.1.4 Core.

Read more here