ปิดการใช้งาน nganimate สำหรับบางองค์ประกอบ

ฉันใช้โมดูล ngAnimate แต่ทั้งหมดของฉันng-if, ng-showฯลฯ รับผลกระทบจากที่ผมต้องการที่จะยกระดับ ngAnimate สำหรับองค์ประกอบที่เลือกบาง สำหรับประสิทธิภาพและข้อบกพร่องบางอย่างในองค์ประกอบที่แสดงและซ่อนอย่างรวดเร็ว

ขอบคุณ.

เพียงเพิ่มสิ่งนี้ลงใน CSS ของคุณ จะดีที่สุดถ้าเป็นกฎสุดท้าย:

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

จากนั้นเพิ่มลงno-animateในคลาสขององค์ประกอบที่คุณต้องการปิดใช้งาน ตัวอย่าง:

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

หากคุณต้องการเปิดใช้งานแอนิเมชั่นสำหรับองค์ประกอบเฉพาะ (ซึ่งต่างจากการปิดใช้งานสำหรับองค์ประกอบเฉพาะ) คุณสามารถใช้$ animateProviderเพื่อกำหนดค่าองค์ประกอบด้วยชื่อคลาสเฉพาะ (หรือ regex) เพื่อทำให้เคลื่อนไหวได้

โค้ดด้านล่างนี้จะเปิดใช้งานภาพเคลื่อนไหวสำหรับองค์ประกอบที่มีangular-animateคลาส:

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

นี่คือตัวอย่างมาร์กอัปที่มีangular-animateคลาสเพื่อเปิดใช้งานภาพเคลื่อนไหว:

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

ตัวอย่างPlunkerยืมและแก้ไขจากบล็อกนี้ซึ่งมีเพียงตัวกรองแรกเท่านั้นที่มีภาพเคลื่อนไหว (เนื่องจากมีangular-animateคลาส)

โปรดทราบว่าฉันใช้angular-animateเป็นตัวอย่างและสามารถกำหนดค่าได้อย่างสมบูรณ์โดยใช้.classNameFilterฟังก์ชัน

มีสองวิธีที่คุณสามารถแยกภาพเคลื่อนไหวใน AngularJS ได้หากคุณมีโมดูล ngAnimate เป็นการพึ่งพาโมดูลของคุณ:

1. ปิดหรือเปิดใช้งานแอนิเมชั่นทั่วโลกบนบริการ $ animate:

   $animate.enabled(false);
   

2. ปิดการใช้งานแอนิเมชั่นสำหรับองค์ประกอบเฉพาะ - ต้องเป็นองค์ประกอบสำหรับเชิงมุมนั้นจึงจะเพิ่มคลาส animationstate css (เช่น ng-enter, ... )!

   $animate.enabled(false, theElement);
   

ในเวอร์ชัน Angular 1.4 คุณควรย้อนกลับอาร์กิวเมนต์:

$animate.enabled(theElement, false);

เอกสารประกอบสำหรับ$animate .

หากต้องการปิดใช้งาน ng-animate สำหรับองค์ประกอบบางอย่างโดยใช้คลาส CSS ซึ่งเป็นไปตาม Angular animate paradigm คุณสามารถกำหนดค่า ng-animate เพื่อทดสอบคลาสโดยใช้ regex

Config

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

การใช้งาน

เพียงเพิ่มng-animate-disabledคลาสให้กับองค์ประกอบใด ๆ ที่คุณต้องการให้ ng-animate เพิกเฉย

เครดิต http://davidchin.me/blog/disable-nganimate-for-selected-elements/

ขอบคุณฉันเขียนคำสั่งที่คุณสามารถวางไว้บนองค์ประกอบได้

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

ฉันพบว่า$animate.enabled(false, $element);จะใช้ได้กับองค์ประกอบที่ใช้ng-showหรือng-hideแต่จะใช้ไม่ได้กับองค์ประกอบที่ใช้ng-ifด้วยเหตุผลบางประการ! วิธีการแก้ปัญหาที่ฉันสิ้นสุดที่ใช้คือการทำมันทั้งหมดใน CSS ซึ่งผมได้เรียนรู้จากกระทู้นี้บน 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;
}

วทส

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

ฉันไม่ต้องการใช้ ngAnimate กับฉันng-ifดังนั้นนี่จะเป็นทางออกของฉัน:

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

เพียงโพสต์นี้เป็นข้อเสนอแนะอื่น!

ฉันมีรายการที่รายการแรกliถูกซ่อนไว้โดยใช้ng-hide="$first". ใช้ng-enterผลลัพธ์ในliการแสดงเป็นเวลาครึ่งวินาทีก่อนที่จะหายไป

จากการแก้ปัญหาของ Chris Barr ตอนนี้รหัสของฉันมีลักษณะดังนี้:

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

ฉันรู้ว่ามันเป็นการตอบกลับล่าช้า แต่ที่นี่เราใช้ใน MainController:

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

แต่ปัญหาก็คือว่าเมื่อเราปิดการใช้งานภาพเคลื่อนไหวทุก opacity: 0UI-เลือกมีการกำหนดให้

ดังนั้นจึงจำเป็นต้องตั้งค่าความทึบเป็น 1 โดยใช้ CSS:

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

สิ่งนี้จะตั้งค่าความทึบอย่างถูกต้องและ ui-select จะทำงาน