আমি ngAnimate মডিউল ব্যবহার করছি, কিন্তু আমার ng-if, ng-show, ইত্যাদি, যে দ্বারা প্রভাবিত হয়, আমি কিছু নির্বাচিত উপাদানের জন্য লিভারেজ ngAnimate করতে চাই। পারফরম্যান্স এবং উপাদানগুলির মধ্যে কিছু বাগের জন্য যা খুব দ্রুত দেখায় এবং লুকায়।
ধন্যবাদ
display:blockআপনার সমস্ত পুনরাবৃত্তকারীকে এনজিমেট বাহিনী :ng-hide-add-active, .ng-hide-remove { display: block!important; }
উত্তর:
এটি কেবল আপনার সিএসএসে যুক্ত করুন। এটি সর্বশেষ নিয়ম হলে সবচেয়ে ভাল:
.no-animate {
-webkit-transition: none !important;
transition: none !important;
}
তারপরে no-animateআপনি অক্ষম করতে চান এমন উপাদানটির শ্রেণিতে যুক্ত করুন । উদাহরণ:
<div class="no-animate"></div>
.no-animate, .no-animate-children *বাচ্চাদের,
আপনি যদি নির্দিষ্ট উপাদানগুলির জন্য অ্যানিমেশনগুলি সক্ষম করতে চান (নির্দিষ্ট উপাদানগুলির জন্য তাদের অক্ষম করার বিপরীতে) আপনি সঞ্চারিত করতে নির্দিষ্ট শ্রেণীর নাম (বা রেজেক্স) সহ উপাদানগুলি কনফিগার করতে $ অ্যানিমেটপ্রাইডারটি ব্যবহার করতে পারেন ।
নীচের কোডটি এমন 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ফাংশনটি ব্যবহার করে এটি সম্পূর্ণরূপে কনফিগারযোগ্য ।
/^(?:(?!ng-animate-disabled).)*$/দিয়ে অ্যানিমেশন নিষ্ক্রিয় করতে রিজেেক্স ব্যবহার করুন ng-animate-disabled।
অ্যাঙ্গুলারজেএস-এ অ্যানিমেশনগুলি নিষ্ক্রিয় করতে পারেন এমন দুটি উপায় রয়েছে যদি আপনার মডিউলের উপর নির্ভরতা হিসাবে মডিউল এনজিনেট থাকে:
বিশ্বব্যাপী $ অ্যানিমেট পরিষেবাটিতে অ্যানিমেশনটি অক্ষম বা সক্ষম করুন:
$animate.enabled(false);
নির্দিষ্ট উপাদানের জন্য অ্যানিমেশনগুলি অক্ষম করুন - এটি অবশ্যই সেই কৌণিকের জন্য উপাদান হতে হবে অ্যানিমেশনস্টেট সিএসএস ক্লাস যুক্ত করবে (যেমন এনজি-এন্টার, ...)!
$animate.enabled(false, theElement);
কৌণিক 1.4 সংস্করণ হিসাবে আপনার যুক্তিগুলি বিপরীত করা উচিত:
$animate.enabled(theElement, false);
এনজি-অ্যানিমে নির্দিষ্ট উপাদানগুলির জন্য, সিএসএস বর্গ ব্যবহার করে, যা কৌণিক অ্যানিমেট দৃষ্টান্ত অনুসরণ করে, এনজি-অ্যানিমেটটি রেজিগ্স ব্যবহার করে শ্রেণি পরীক্ষা করতে আপনি কনফিগার করতে পারেন।
কনফিগার করুন
var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.config(function($animateProvider) {
$animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
})
ব্যবহার
ng-animate-disabledআপনি এনজি-অ্যানিমে উপেক্ষা করতে চান এমন কোনও উপাদানগুলিতে কেবল ক্লাস যুক্ত করুন ।
Credit ণ
ধন্যবাদ, আমি একটি নির্দেশ লিখেছি যা আপনি উপাদানটিতে রাখতে পারেন
কফিস্ক্রিপ্ট:
myApp.directive "disableAnimate", ($animate) ->
(scope, element) ->
$animate.enabled(false, element)
জাভাস্ক্রিপ্ট:
myApp.directive("disableAnimate", function ($animate) {
return function (scope, element) {
$animate.enabled(false, element);
};
});
$animate.enabled(element,false);
আমি খুঁজে পেয়েছি যে $animate.enabled(false, $element);এটি ব্যবহারকারী উপাদানগুলির জন্য কাজ করবে ng-showবা ng-hideতবে এটিng-if কোনও কারণে ব্যবহৃত উপাদানগুলির জন্য কাজ করবে না ! যে সমাধানটি আমি ব্যবহার করে শেষ করেছি তা হ'ল এটিই কেবল 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;
}
}
আমি আমার উপর এনজিএমিট ব্যবহার করতে চাই নাng-if , সুতরাং এটি আমার সমাধান হবে:
[ng-if] {
.ng-enter, .ng-leave, .ng-animate {
-webkit-transition: none !important;
transition: none !important;
}
}
এটি অন্য পরামর্শ হিসাবে পোস্ট করা!
আমার একটি তালিকা রয়েছে যা থেকে প্রথমটি liব্যবহার করে লুকানো আছে ng-hide="$first"। ব্যবহার ng-enterফলাফল liহচ্ছে অদৃশ্য সামনে অর্ধেক একটি দ্বিতীয় জন্য দেখানো।
ক্রিস বারের সমাধানের ভিত্তিতে, আমার কোডটি এখন এ জাতীয় দেখাচ্ছে:
এইচটিএমএল
<ol>
<li ng-repeat="item in items"
ng-hide="$first"
ng-class="{'no-animate' : $first}">
</li>
</ol>
সিএসএস
.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. */
আমি জানি যে এটি একটি বিলম্বিত উত্তর, কিন্তু আমরা এখানে মেইনকন্ট্রোলার ব্যবহার করি:
// disable all animations
$animate.enabled(false);
তবে সমস্যাটি হ'ল আমরা যখন সমস্ত অ্যানিমেশন অক্ষম করি তখন ইউআই-সিলেক্ট কনফিগার করা হয় opacity: 0।
সুতরাং, সিএসএস ব্যবহার করে ধাপে ধাপে 1 এ সেট করা প্রয়োজনীয়:
.ui-select-choices {
opacity: 1 !important;
}
এটি সঠিকভাবে অস্বচ্ছতা সেট করবে এবং ইউআই-সিলেক্ট কাজ করবে।