অস্থায়ীভাবে সিএসএস রূপান্তর প্রভাবগুলি অক্ষম করার সর্বোত্তম উপায় কী?

Question

নীচের কয়েকটি / সমস্ত প্রয়োগের সাথে আমার একটি ডোম উপাদান রয়েছে:

#elem {
  -webkit-transition: height 0.4s ease;
  -moz-transition: height 0.4s ease;
  -o-transition: height 0.4s ease;
  transition: height 0.4s ease;
}

আমি একটি jQuery প্লাগইন লিখছি যা এই উপাদানটির আকার পরিবর্তন করছে, আমার এই প্রভাবগুলি সাময়িকভাবে অক্ষম করা দরকার যাতে আমি এটিকে সহজেই আকার দিতে পারি।

এই প্রভাবগুলি অস্থায়ীভাবে নিষ্ক্রিয় করার সর্বাধিক মার্জিত উপায় কী (তবে তারপরে সেগুলি পুনরায় সক্ষম করুন), এগুলি প্রদত্ত যে তারা পিতামাতার কাছ থেকে প্রয়োগ হতে পারে বা প্রয়োগ করা যেতে পারে না।

Comments

এটি আশাব্যঞ্জক দেখাচ্ছে: রিস্টোস্টাক্রুজ . com / jquery.transit । এটি এমআইটি লাইসেন্সবিহীন, যাতে আপনি এটি অন্তর্ভুক্ত করতে পারেন, বা তিনি কীভাবে এটি করেন তা দেখার জন্য এটি অধ্যয়ন করতে পারে।

— রবার্ট হার্ভে

সমস্ত উত্তর একটি বর্গ যোগ.notransition । এটি অন্যভাবে এটি করা আরও যুক্তিসঙ্গত হবে, অর্থাৎ #elem.yestransitionআপনার সিএসএস দিয়ে লক্ষ্য করুন এবং এই শ্রেণিটি সরিয়ে দিন remove এটি *আপনার সিএসএসে কদর্য s সরিয়ে দেয় ।

— মার্সেলোথারেকেন

Answer 1

সংক্ষিপ্ত উত্তর

এই সিএসএস ব্যবহার করুন:

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

প্লাস হয় এই জেএস (jQuery ছাড়া) ...

someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions

বা jQuery সহ এই জেএস ...

$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow, flushing the CSS changes
$someElement.removeClass('notransition'); // Re-enable transitions

... বা আপনি যে লাইব্রেরি বা ফ্রেমওয়ার্কের সাথে কাজ করছেন তা ব্যবহার করে সমতুল্য কোড।

ব্যাখ্যা

এটি আসলে মোটামুটি সূক্ষ্ম সমস্যা।

প্রথমত, আপনি সম্ভবত একটি 'নোট্রিশন' শ্রেণি তৈরি করতে চান যা আপনি উপাদানগুলির সেট করার জন্য প্রয়োগ করতে পারেন *-transition সিএসএস বৈশিষ্ট্যগুলিnone । এই ক্ষেত্রে:

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

_{(একপাশে নাবালিকা - একটি অভাব নোট করুন -ms-transition । সেখানে আপনি এটা প্রয়োজন হবে না প্রথম Internet Explorer এর সমর্থন ট্রানজিশন থেকে সংস্করণ। এ সব IE 10 ব্যবহার ছিল যা সমর্থিত তাদের প্রিফিক্স না করা।)}

তবে এটি কেবল স্টাইল এবং এটি সহজ বিট। আপনি যখন এই ক্লাসটি ব্যবহার করে দেখতে এসেছেন তখন আপনি একটি ফাঁদে পড়বেন। ফাঁদটি হ'ল এই কোডটি এমনভাবে কাজ করবে না যেভাবে আপনি নির্লজ্জভাবে আশা করতে পারেন:

// Don't do things this way! It doesn't work!
someElement.classList.add('notransition')
someElement.style.height = '50px' // just an example; could be any CSS change
someElement.classList.remove('notransition')

নিঃসন্দেহে, আপনি ভাবতে পারেন যে উচ্চতার পরিবর্তনটি অ্যানিমেটেড হবে না, কারণ 'নোট্রিশন' শ্রেণি প্রয়োগ করার সময় এটি ঘটে। বাস্তবে, যদিও এটি অ্যানিমেটেড হবে , কমপক্ষে সমস্ত আধুনিক ব্রাউজারে আমি চেষ্টা করেছি। সমস্যাটি হ'ল ব্রাউজারটি জাভাস্ক্রিপ্টের সম্পাদনা শেষ না হওয়া অবধি স্টাইলিং পরিবর্তনগুলি করা হচ্ছে এবং তারপরে একক রিফ্লোতে সমস্ত পরিবর্তন আনতে হবে। ফলস্বরূপ, এটি এমন একটি প্রতিচ্ছবি ঘটায় যেখানে ট্রানজিশনগুলি সক্ষম হয় কি না তাতে কোনও নেট পরিবর্তন নেই, তবে উচ্চতায় নেট পরিবর্তন রয়েছে। ফলস্বরূপ, এটি উচ্চতা পরিবর্তনকে অ্যানিমেট করে।

আপনি মনে করতে পারেন এর কাছাকাছি যাওয়ার একটি যুক্তিসঙ্গত এবং পরিষ্কার উপায় হ'ল 1 মিমি সময়সীমার মধ্যে 'নোট্রিশন' শ্রেণীর অপসারণটি গুটিয়ে রাখা, এটির মতো:

// Don't do things this way! It STILL doesn't work!
someElement.classList.add('notransition')
someElement.style.height = '50px' // just an example; could be any CSS change
setTimeout(function () {someElement.classList.remove('notransition')}, 1);

তবে এটি নির্ভরযোগ্যভাবে কাজ করে না। আমি ওয়েবকিট ব্রাউজারগুলিতে উপরের কোডটি ব্রেক করতে সক্ষম হয়েছি না, তবে ফায়ারফক্সে (উভয় ধীর এবং দ্রুত মেশিনে) আপনি কখনও কখনও (আপাতদৃষ্টিতে এলোমেলোভাবে) নিখুঁত পদ্ধতির ব্যবহারের মতো আচরণ পাবেন। আমি এর কারণ অনুমান করি যে জাভাস্ক্রিপ্টের কার্যকরকরণের পক্ষে এতটা ধীর হওয়া সম্ভব যে ব্রাউজারটি নিষ্ক্রিয় হওয়ার সময়সীমা নির্বাহের জন্য অপেক্ষা করা হয় এবং অন্যথায় সুযোগসন্ধানী রিফ্লো করার কথা ভাবছিল, এবং যদি সেই পরিস্থিতি ঘটে, ফায়ারফক্স রেফ্লোয়ের আগে সারিবদ্ধ ফাংশন সম্পাদন করে।

সমস্যার সমাধানের একমাত্র সমাধান হ'ল 'নোট্রিশন' শ্রেণিটি সরিয়ে নেওয়ার আগে উপাদানটির পুনর্বিবেচনা জোর করা , এতে করা সিএসএস পরিবর্তনগুলি ফ্লাশ করে দেওয়া। এটি করার বিভিন্ন উপায় রয়েছে - কিছুটির জন্য এখানে দেখুন । এটি করার একটি 'স্ট্যান্ডার্ড' পদ্ধতির নিকটতম জিনিসটি হল offsetHeightউপাদানটির সম্পত্তিটি পড়া ।

একটি সমাধান যা আসলে কাজ করে তা হ'ল

someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions

এখানে একটি জেএস ফ্রিডল যা আমি এখানে বর্ণিত তিনটি সম্ভাব্য পদ্ধতির চিত্র তুলে ধরেছি (একটি সফল পন্থা এবং দুটি ব্যর্থ দুটিই): http://jsfiddle.net/2uVAA/131/

Comments

উত্তরের উত্তর। ভাল কাজ, এবং প্রশংসা করছি যেহেতু আমি একই সমস্যা নিয়ে এসেছি। আমি যদি কেবলমাত্র এক ধরণের রূপান্তর মুছে ফেলতে চাইতাম?

— রাফেলমোরাইস

আপনার সমাধানটি সঠিক, তবে আরও পটভূমি সম্পর্কিত তথ্য যারা খুঁজছেন তাদের জন্য: stackoverflow.com/a/31862081/1026

— নিকোলে

ক্ষুদ্র ক্ষুদ্র সরাইয়া, IE10 প্রথম স্থিতিশীল প্রিফিক্স না করা রূপান্তরগুলি সহ জাহাজ অর্থাত্ সংস্করণ। রিলিজ পূর্ববর্তী সংস্করণগুলি, রিলিজ পূর্বরূপটি বাদ দিয়ে অন্যান্য বেশ কয়েকটি বিষয় সহ রূপান্তরগুলির জন্য -ms- উপসর্গ প্রয়োজন। এটি, আমার সন্দেহ, আজ -কের-উপসর্গটি উপস্থিত হওয়ার অন্যতম কারণ। অন্যটি, সম্ভবত খুব সম্ভবত কারণটি হ'ল স্বাভাবিক কার্গো কাল্ট যা আমরা সকলেই ভেন্ডর উপসর্গগুলি সম্পর্কে জানতে এবং তাদের সম্পর্কে জানতে পেরেছি।

— BoltClock

আকর্ষণীয় যে কেবল কোনও উপাদানের অফসেট উচ্চতা চেক করা একটি প্রতিস্থাপনকে ট্রিগার করে। আশা করি এক বছর আগে আমি যখন জানতাম যখন আমি একই সমস্যাটি দিয়ে প্রাচীরের বিরুদ্ধে মাথা ঠাট্টা করছিলাম। এটিকে এখনও পরিচালনা করার সবচেয়ে আদর্শ উপায় হিসাবে বিবেচনা করা হয়?

— ব্রেট 84c

রিফ্লো ট্রিকটি এসভিজি উপাদানগুলিকে অ্যানিমেট করার সময় কাজ করবে বলে মনে হয় না যার অফসেটহাইট বৈশিষ্ট্য নেই; সেটটাইমআউট কাজ করে।

— piotr_cz

Answer 2

আমি ড্যানসোলের পরামর্শ অনুসারে অ্যানিমেশন অক্ষম করার পক্ষে, তবে স্যুইচটিকে বিশ্বব্যাপী তৈরি করার পক্ষে পরামর্শ দেব:

/*kill the transitions on any descendant elements of .notransition*/
.notransition * { 
  -webkit-transition: none !important; 
  -moz-transition: none !important; 
  -o-transition: none !important; 
  -ms-transition: none !important; 
  transition: none !important; 
} 

.notransitionতারপরে bodyউপাদানটিতে প্রয়োগ করা যেতে পারে , কার্যকরভাবে পৃষ্ঠায় কোনও রূপান্তর অ্যানিমেশন ওভাররাইড করে:

$('body').toggleClass('notransition');

Comments

আসলে এটি হ'ল সঠিক বিকল্প ইমো im বিশেষত * অনেক সাহায্য করে, সাব অ্যানিমেশনগুলির কোনওটিই ট্রিগার না করে তা নিশ্চিত করে। ধন্যবাদ, upvated।

— শিজোডাকি

এটি এমন পরিস্থিতিতেগুলির সঠিক উত্তর যা আপনি কেবল একবারে সমস্ত করতে চান। উদাহরণস্বরূপ, আমি মোবাইলে ঘোরার সময় ট্রানজিশনগুলি অক্ষম করতে চাই এবং এটি এটির জন্য উপযুক্ত।

— বেন লাচম্যান

আমি এটিকে কিছুটা জটিল দৃশ্যে, কৌণিক জালাগুলিতে ব্যবহার করে শেষ করেছি, তবে byশ্বরের কথায় এটি আমার মাথা ঘুরানোর কয়েক দিন পরে এতো সহায়ক হয়েছিল।

— আদিত্য এমপি

পারফরম্যান্স অনুযায়ী আমি এটিকে মোটেই ভাল ধারণা আশা করতে পারি না। "ওহ, এটি কেবলমাত্র পৃষ্ঠাটিতে সমস্ত কিছুতে প্রয়োগ করুন, এটি বিষয়গুলি সহজ করে তোলে!"

— লোডেভিজক

সম্পূর্ণ কার্যকর হওয়ার জন্য সম্ভবত ".নোট্রান্সিশন" এবং ".নোট্রেশন *" উভয়ই নির্বাচন করা উচিত।

— নাথান

Answer 3

একটি অতিরিক্ত সিএসএস ক্লাস যুক্ত করুন যা রূপান্তরকে অবরুদ্ধ করে এবং তারপরে এটি পূর্ববর্তী অবস্থায় ফিরে আসার জন্য সরান। এটি সিএসএস এবং জ্যাকিউরি কোড উভয়কেই সংক্ষিপ্ত, সহজ এবং ভালভাবে বোধগম্য করে তোলে।

সিএসএস :

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

!important এই নিয়মে আরও "ওজন" থাকবে তা নিশ্চিত করার জন্য যুক্ত করা হয়েছিল, কারণ আইডি সাধারণত শ্রেণীর তুলনায় বেশি নির্দিষ্ট।

জিকুয়েরি :

$('#elem').addClass('notransition'); // to remove transition
$('#elem').removeClass('notransition'); // to return to previouse transition

Comments

-1 কারণ এটি আমার জন্য ক্রোম বা ফায়ারফক্সে সমস্যার সমাধান করার পক্ষে যথেষ্ট ছিল না - যদি আমার কাছে জাভাস্ক্রিপ্ট থাকে যা ক্লাস যুক্ত করে, পরিবর্তন করে এবং ক্লাসটি সরিয়ে দেয়, কখনও কখনও পরিবর্তনগুলি এখনও অ্যানিমেট করে। আমি এই সমস্যাটি অল্প বিশদে অধ্যয়ন করতে শেষ ঘন্টা বা দু'টি ব্যয় করেছি এবং পরে একটি উত্তর পোস্ট করব ফিডলগুলি যেখানে এমন নিষ্পাপ দৃষ্টিভঙ্গি ব্যর্থ হয় সেগুলি প্রদর্শন করে, সাথে সাথে একটি ঝরঝরে হ্যাক যা সমাধানগুলি এখানে স্থির করে দেয় পরিবর্তনগুলি এবং অপসারণের মধ্যে একটি প্রতিস্থাপন জোর করে solution 'নোট্রিশন' ক্লাস

— মার্ক অ্যামেরি

Answer 4

একটি বিশুদ্ধ জাতীয় সমাধান (কোন সিএসএস ক্লাস) জন্য, শুধু সেট transitionকরতে 'none'। সিএসএসে উল্লিখিত রূপান্তরটি পুনরুদ্ধার করতে, transitionএকটি খালি স্ট্রিংটিতে সেট করুন ।

// Remove the transition
elem.style.transition = 'none';

// Restore the transition
elem.style.transition = '';

আপনি যদি বিক্রেতা উপসর্গগুলি ব্যবহার করেন তবে আপনার সেগুলিও সেট করা দরকার।

elem.style.webkitTransition = 'none'

Answer 5

আপনি এই সিএস কোড সহ পৃষ্ঠাতে সমস্ত উপাদানগুলির জন্য অ্যানিমেশন, ট্রানজিশন, ট্র্যাসফর্মগুলি অক্ষম করতে পারেন

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '* {' +
'/*CSS transitions*/' +
' -o-transition-property: none !important;' +
' -moz-transition-property: none !important;' +
' -ms-transition-property: none !important;' +
' -webkit-transition-property: none !important;' +
'  transition-property: none !important;' +
'/*CSS transforms*/' +
'  -o-transform: none !important;' +
' -moz-transform: none !important;' +
'   -ms-transform: none !important;' +
'  -webkit-transform: none !important;' +
'   transform: none !important;' +
'  /*CSS animations*/' +
'   -webkit-animation: none !important;' +
'   -moz-animation: none !important;' +
'   -o-animation: none !important;' +
'   -ms-animation: none !important;' +
'   animation: none !important;}';
   document.getElementsByTagName('head')[0].appendChild(style);

Comments

প্রথমত এটি দুর্দান্ত, আপনাকে ধন্যবাদ! দ্বিতীয়ত কিছু অন্যান্য সম্পত্তিও সেট করা উচিত ছিল; দেখতে github.com/japgolly/test-state/blob/master/util/shared/src/test/...

— বিস্ময়সূচক অব্যয়

@ গলি এই অন্যান্য বৈশিষ্ট্যগুলি চূড়ান্ত

— নকশাটিকে

Answer 6

আমি মনে করি আপনি একটি পৃথক সিএসএস ক্লাস তৈরি করতে পারেন যা আপনি এই ক্ষেত্রে ব্যবহার করতে পারেন:

.disable-transition {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: color 0 ease-in;
  -ms-transition: none;
  transition: none;
}

তারপরে jQuery এ আপনি ক্লাসটি এমনভাবে টগল করবেন:

$('#<your-element>').addClass('disable-transition');

Comments

হ্যাঁ আমি মনে করি এটিই সেরা পন্থা, আসলে প্লাগইন সেই CSS ব্লকটি পৃষ্ঠায় ইনজেক্ট করতে পারে

— স্যাম সাফ্রন

আপনি কি নিশ্চিত যে গুরুত্বপূর্ণ ক্লাসের শাসক আইডিটিকে ওভাররাইড করবেন?

— ড্যানসোল

Answer 7

আপনি যদি সমস্ত রূপান্তর প্রতিরোধের জন্য একটি সাধারণ নো-জিকুরি সমাধান চান:

1. এই সিএসএস যুক্ত করুন:

body.no-transition * {
  transition: none !important;
}

2. এবং তারপরে আপনার জেএসে:

document.body.classList.add("no-transition");

// do your work, and then either immediately remove the class:

document.body.classList.remove("no-transition");

// or, if browser rendering takes longer and you need to wait until a paint or two:

setTimeout(() => document.body.classList.remove("no-transition"), 1);

// (try changing 1 to a larger value if the transition is still applying)

Answer 8

আপনি যদি বর্তমান ওয়েবপৃষ্ঠা থেকে সিএসএস রূপান্তর, রূপান্তর এবং অ্যানিমেশনগুলি সরাতে চান তবে আমি লিখেছিলাম এই ছোট স্ক্রিপ্টটি কার্যকর করতে পারেন (আপনার ব্রাউজার কনসোলের অভ্যন্তরে):

let filePath = "https://dl.dropboxusercontent.com/s/ep1nzckmvgjq7jr/remove_transitions_from_page.css";
let html = `<link rel="stylesheet" type="text/css" href="${filePath}">`;
document.querySelector("html > head").insertAdjacentHTML("beforeend", html);

এটি এই সিএসএস-ফাইলটি লোড করতে ভ্যানিলাজেএস ব্যবহার করে । আপনি যদি কোনও স্ক্র্যাপের (রুবি-সেলেনিয়াম) প্রসঙ্গে এটি ব্যবহার করতে চান তবে হেরেস একটি গিথুব রেপোও সরিয়ে ফেলুন-সিএসএস-অ্যানিমেশন-রেপো

Answer 9

না

$('#elem').css('-webkit-transition','none !important'); 

তোমার জেএসে এটা মেরে ফেলবে?

স্পষ্টতই প্রতিটি জন্য পুনরাবৃত্তি।

Comments

তারপরে আপনাকে এটিকে পুনরায় সেট করতে হবে, সুতরাং আপনার এটি সংরক্ষণ করা দরকার, যা যথেষ্ট পরিমাণে বয়লার প্লেটের দিকে নিয়ে যায়

— স্যাম স্যাফ্রন

Answer 10

আপনার সিএসএসে আমি এর মতো ক্লাস করতাম:

.no-transition { 
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}

এবং তারপরে আপনার jQuery এ:

$('#elem').addClass('no-transition'); //will disable it
$('#elem').removeClass('no-transition'); //will enable it

Comments

আপনি কি নিশ্চিত যে গুরুত্বপূর্ণ ক্লাসের শাসক আইডিটিকে ওভাররাইড করবেন?

— ড্যানসোল

হ্যাঁ, এটা কারণ এখন আপনি লক্ষ্য করে করছি হবে # elem.no-রূপান্তরটি যা শুধু আইডি চেয়ে বেশি নির্দিষ্ট

— মঈন জামান

@ মoinনজামান এর্ম, কিন্তু আপনি আপনার সিএসএসে লক্ষ্যবস্তু করেননি#elem.no-transition , আপনি সবেমাত্র লক্ষ্য রেখেছেন .no-transition। সম্ভবত আপনি #elem.no-transitionআপনার সিএসএস লিখতে চেয়েছিলেন ?

— মার্ক আমেরিকা