nonaktifkan nganimate untuk beberapa elemen

Saya menggunakan modul ngAnimate, tapi semua saya ng-if, ng-show, dll, dipengaruhi oleh itu, saya ingin memanfaatkan ngAnimate untuk beberapa elemen yang dipilih. Untuk performa dan beberapa bug pada elemen yang menampilkan dan menyembunyikan sangat cepat.

Terima kasih.

Cukup tambahkan ini ke CSS Anda. Lebih baik jika itu adalah aturan terakhir:

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

lalu tambahkan no-animateke kelas elemen yang ingin Anda nonaktifkan. Contoh:

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

Jika Anda ingin mengaktifkan animasi untuk elemen tertentu (bukan menonaktifkannya untuk elemen tertentu), Anda dapat menggunakan $ animateProvider untuk mengonfigurasi elemen dengan nama kelas tertentu (atau regex) untuk dianimasikan.

Kode di bawah ini akan mengaktifkan animasi untuk elemen yang memiliki angular-animatekelas:

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

Berikut adalah contoh markup yang menyertakan angular-animatekelas untuk mengaktifkan animasi:

<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>

Contoh Plunker dipinjam dan dimodifikasi dari blog ini dimana hanya filter pertama yang memiliki animasi (karena angular-animateberkelas).

Harap dicatat bahwa saya menggunakan angular-animatesebagai contoh dan itu sepenuhnya dapat dikonfigurasi menggunakan .classNameFilterfungsi tersebut.

Ada dua cara untuk menampilkan animasi di AngularJS jika Anda memiliki modul ngAnimate sebagai dependensi pada modul Anda:

1. Nonaktifkan atau aktifkan animasi secara global pada layanan $ animate:

   $animate.enabled(false);

2. Nonaktifkan animasi untuk elemen tertentu - ini harus menjadi elemen untuk sudut itu akan menambahkan kelas css keadaan animasi (misalnya ng-enter, ...)!

   $animate.enabled(false, theElement);

Pada versi Angular 1.4 Anda harus membalikkan argumen:

$animate.enabled(theElement, false);

Dokumentasi untuk$animate .

Untuk menonaktifkan ng-animate untuk elemen tertentu, menggunakan kelas CSS, yang mengikuti paradigma animasi Angular, Anda dapat mengonfigurasi ng-animate untuk menguji kelas menggunakan regex.

Config

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

Pemakaian

Cukup tambahkan ng-animate-disabledkelas ke elemen apa pun yang ingin Anda abaikan dengan ng-animate.

Kredit http://davidchin.me/blog/disable-nganimate-for-selected-elements/

terima kasih, saya menulis arahan yang dapat Anda tempatkan di elemen

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);
    };
});

Saya telah menemukan itu $animate.enabled(false, $element);akan berfungsi untuk elemen yang menggunakan ng-showatau ng-hidetetapi tidak akan berfungsi untuk elemen yang digunakan ng-ifkarena alasan tertentu! Solusi yang akhirnya saya gunakan adalah melakukan semuanya di CSS, yang saya pelajari dari utas ini di 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;
  }
}

Saya TIDAK ingin menggunakan ngAnimate di milik saya ng-if, jadi ini akan menjadi solusi saya:

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

Posting ini sebagai saran lain!

Saya memiliki daftar dari mana yang pertama lidisembunyikan menggunakan ng-hide="$first". Menggunakan ng-enterhasil liyang ditampilkan selama setengah detik sebelum menghilang.

Berdasarkan solusi Chris Barr, kode saya sekarang terlihat seperti ini:

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. */

Saya tahu bahwa ini adalah balasan yang tertunda, tetapi di sini kami menggunakan MainController:

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

Tetapi masalahnya adalah ketika kita menonaktifkan semua animasi, ui-pilih dikonfigurasikan ke opacity: 0.

Jadi, perlu untuk mengatur opacity menjadi 1 menggunakan CSS:

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

Ini akan mengatur opacity dengan benar dan ui-select akan bekerja.