vô hiệu hóa nganimate cho một số phần tử

Tôi đang sử dụng các mô-đun ngAnimate, nhưng tất cả của tôi ng-if, ng-show, vv, bị ảnh hưởng bởi điều đó, tôi muốn tận dụng ngAnimate đối với một số yếu tố được lựa chọn. Đối với hiệu suất và một số lỗi trong các yếu tố hiển thị và ẩn rất nhanh.

cảm ơn.

Chỉ cần thêm cái này vào CSS của bạn. Tốt nhất nếu đó là quy tắc cuối cùng:

.no-animate {
   -webkit-transition: none !important;
   transition: none !important;
}

sau đó thêm no-animatevào lớp phần tử bạn muốn vô hiệu hóa. Thí dụ:

<div class="no-animate"></div>

Nếu bạn muốn bật hoạt ảnh cho các phần tử cụ thể (thay vì tắt chúng cho các phần tử cụ thể), bạn có thể sử dụng $ animateProvider để định cấu hình các phần tử có tên lớp cụ thể (hoặc regex) để tạo hoạt ảnh.

Đoạn mã dưới đây sẽ kích hoạt hoạt ảnh cho các phần tử có angular-animatelớp:

var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.config(function($animateProvider) {
  $animateProvider.classNameFilter(/angular-animate/);
})

Đây là ví dụ đánh dấu bao gồm angular-animatelớp để bật hoạt ảnh:

<div ng-init="items=[1,2,3,4,5,6,7,8,9]">
  <input placeholder="Filter with animations." ng-model="f" /> 
  <div class="my-repeat-animation angular-animate" ng-repeat="item in items | filter:f track by item" >
    {{item}}
  </div>
</div>

Ví dụ về Plunker được mượn và sửa đổi từ blog này , nơi chỉ bộ lọc đầu tiên có hình ảnh động (do có angular-animatelớp).

Xin lưu ý rằng tôi đang sử dụng angular-animatelàm ví dụ và nó hoàn toàn có thể định cấu hình bằng cách sử dụng .classNameFilterchức năng.

Có hai cách để bạn có thể tắt hoạt ảnh trong AngularJS nếu bạn có mô-đun ngAnimate làm phụ thuộc vào mô-đun của bạn:

1. Tắt hoặc bật hoạt ảnh trên toàn cầu trên dịch vụ $ animate:

   $animate.enabled(false);

2. Tắt các hoạt ảnh cho một phần tử cụ thể - đây phải là phần tử cho góc đó sẽ thêm các lớp css animationstate (ví dụ: ng-enter, ...)!

   $animate.enabled(false, theElement);

Kể từ phiên bản Angular 1.4, bạn nên đảo ngược các đối số:

$animate.enabled(theElement, false);

Tài liệu cho$animate .

Để tắt ng-animate cho các phần tử nhất định, bằng cách sử dụng lớp CSS, theo mô hình Angular animate, bạn có thể định cấu hình ng-animate để kiểm tra lớp bằng regex.

Cấu hình

    var myApp = angular.module("MyApp", ["ngAnimate"]);
    myApp.config(function($animateProvider) {
        $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
    })

Sử dụng

Đơn giản chỉ cần thêm ng-animate-disabledlớp vào bất kỳ phần tử nào bạn muốn được ng-animate bỏ qua.

Tín dụng http://davidchin.me/blog/disable-nganimate-for-selected-elements/

cảm ơn, tôi đã viết một chỉ thị mà bạn có thể đặt trên phần tử

CoffeeScript:

myApp.directive "disableAnimate", ($animate) ->
  (scope, element) ->
    $animate.enabled(false, element)

JavaScript:

myApp.directive("disableAnimate", function ($animate) {
    return function (scope, element) {
        $animate.enabled(false, element);
    };
});

Tôi đã thấy rằng nó $animate.enabled(false, $element);sẽ hoạt động cho các phần tử sử dụng ng-showhoặc ng-hidenhưng nó sẽ không hoạt động cho các phần tử sử dụng ng-ifvì một số lý do! Giải pháp cuối cùng tôi đã sử dụng là chỉ làm tất cả trong CSS, điều mà tôi đã học được từ chuỗi này trên GitHub .

CSS

/* Use this for transitions */
.disable-animations.ng-enter,
.disable-animations.ng-leave,
.disable-animations.ng-animate {
  -webkit-transition: none !important;
  transition: none !important;
}

/* Use this for keyframe animations */
.disable-animations.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

SCSS

.disable-animations {
  // Use this for transitions
  &.ng-enter,
  &.ng-leave,
  &.ng-animate {
    -webkit-transition: none !important;
    transition: none !important;
  }
  // Use this for keyframe animations
  &.ng-animate {
    -webkit-animation: none 0s;
    animation: none 0s;
  }
}

Tôi KHÔNG muốn sử dụng ngAnimate trên của tôi ng-if, vì vậy đây sẽ là giải pháp của tôi:

[ng-if] {
  .ng-enter, .ng-leave, .ng-animate {
    -webkit-transition: none !important;
    transition: none !important;
  }
}

Chỉ đăng điều này như một gợi ý khác!

Tôi có một danh sách mà từ đó cái đầu tiên libị ẩn bằng cách sử dụng ng-hide="$first". Sử dụng ng-enterkết quả lihiển thị trong nửa giây trước khi biến mất.

Dựa trên giải pháp của Chris Barr, mã của tôi bây giờ trông giống như sau:

HTML

<ol>
    <li ng-repeat="item in items"
        ng-hide="$first"
        ng-class="{'no-animate' : $first}">
    </li>
</ol>

CSS

.no-animate.ng-enter,
.no-animate.ng-leave,
.no-animate.ng-animate {
        transition: none !important; /* disable transitions */
        animation: none 0s !important; /* disable keyframe animations */
}

li.ng-enter {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
li.ng-enter-active {
    opacity: 1;
}

/* I use Autoprefixer. If you don't, please include vendor prefixes. */

Tôi biết rằng đó là một câu trả lời bị trì hoãn, nhưng ở đây chúng tôi sử dụng trong MainController:

// disable all animations
$animate.enabled(false);

Nhưng vấn đề là khi chúng tôi tắt tất cả các hoạt ảnh, ui-select được định cấu hình thành opacity: 0.

Vì vậy, điều cần thiết là đặt opacity thành 1 bằng CSS:

.ui-select-choices {
    opacity: 1 !important;
}

Thao tác này sẽ đặt độ mờ một cách chính xác và ui-select sẽ hoạt động.