উত্তরাধিকার সূত্রে প্রাপ্ত CSS3 রূপান্তর অক্ষম / বন্ধ করুন

Question

সুতরাং আমি একটি এলিমেন্টের সাথে নিম্নলিখিত সিএসএস রূপান্তরগুলি সংযুক্ত করেছি:

a { 
     -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;  
     -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     -o-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     transition:color 0.1s ease-in, background-color 0.1s ease-in; 
}

নির্দিষ্ট উপাদানগুলিতে এই উত্তরাধিকারসূত্রে স্থানান্তরগুলি অক্ষম করার কোনও উপায় আছে কি?

a.tags { transition: none; } 

কাজটি করছে বলে মনে হয় না।

Answer 1

ব্যবহারের transition: noneনিচের HTML দেওয়া (অপেরা এর জন্য কোনো সুনির্দিষ্ট সমন্বয় সঙ্গে) সমর্থিত হবে বলে মনে হয়:

<a href="#" class="transition">Content</a>
<a href="#" class="transition">Content</a>
<a href="#" class="noTransition">Content</a>
<a href="#" class="transition">Content</a>

... এবং সিএসএস:

a {
    color: #f90;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 
}
a:hover {
    color: #f00;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 
}
a.noTransition {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

জেএস ফিডল ডেমো ।

উবুন্টু ১১.০৪-এ ক্রোমিয়াম 12, অপেরা 11.x এবং ফায়ারফক্স 5 দিয়ে পরীক্ষিত।

অপেরাতে সুনির্দিষ্ট অভিযোজন হ'ল ব্যবহার -o-transition: color 0 ease-in;যা হ'ল অন্যান্য transitionবিধিগুলিতে উল্লিখিত হিসাবে একই সম্পত্তিকে লক্ষ্য করে কিন্তু পরিবর্তনের সময় নির্ধারণ করে 0যা কার্যকরভাবে রূপান্তরকে লক্ষণীয় হতে বাধা দেয়। a.noTransitionনির্বাচকটির ব্যবহারটি হ'ল কোনও সংকেত ছাড়াই উপাদানগুলির জন্য নির্দিষ্ট নির্বাচক সরবরাহ করা।

---

@ ফ্রাডরিক হামিদির উত্তরটি ব্যবহার করে, এটি নোট করে সম্পাদিতall (অপেরার জন্য, কমপক্ষে) করে প্রতিটি পৃথক সম্পত্তি-নাম তালিকাভুক্ত করার চেয়ে অনেক বেশি সংক্ষিপ্ত, যা আপনি রূপান্তর করতে চান না তা ।

allঅপেরাতে ব্যবহারের চিত্র দেখিয়ে জেএস ফিডাল ডেমো আপডেট করেছেন : -o-transition: all 0 none@ ফ্রিডেরিকের জবাবটি স্ব-মোছার পরে ।

Comments

আহ, আমি ট্রানজিশনের আগে ব্রাউজারের নির্দিষ্ট ট্যাগ যুক্ত করা দরকার। দুষ্ট, চিয়ার্স!

— স্কটি

অপেরা সম্পর্কিত কোনও রূপান্তর তথ্য নেই বলে ধন্যবাদ।

— পেড্রো_স্ল্যান্ড

অপেরা সত্যই এই পার্থক্যের সাথে বিরক্তিকর

— জুনিয়র মেহে

আপনি কেন এমন কিছু করতে পারবেন না: রূপান্তর: রঙ কোনও নয়, পটভূমির রঙ ০.০ সেমি ইজ-ইন;

Answer 2

আপনি যদি একটি একক স্থানান্তর সম্পত্তি অক্ষম করতে চান তবে আপনি এটি করতে পারেন:

transition: color 0s;

(যেহেতু শূন্যের দ্বিতীয় স্থানান্তর কোনও রূপান্তর হিসাবে সমান))

Comments

কোনও পারফরম্যান্স স্টিলার অপরাধ গ্রহণ করতে পারে তবে একক সম্পত্তি অক্ষম করার জন্য এটি বৈধ বলে মনে হচ্ছে।

— ডাবলজোশ

এটি এখন ক্রোমে আমার পক্ষে কাজ করে না। এটি কেবল উত্তরাধিকার সূত্রে প্রাপ্ত সমস্ত রূপান্তর অক্ষম করে।

— বিপর্যয়

আপনি কি একটি উদাহরণ দিতে পারেন @ বিবর্তন

— উইল ম্যাডেন

@ উইলম্যাডডেন, এখানে jsfiddle.net/312bu8po প্রাথমিক অবস্থার চেষ্টা করুন এবং তারপরে সিএসএস-এ প্রস্তুত রেখাটি অসম্পূর্ণ করুন - এর জন্য রূপান্তর leftসরানো হবে।

— বিপর্যয়

Answer 3

সমস্ত রূপান্তর অপসারণের আরেকটি উপায় unsetকীওয়ার্ড সহ:

a.tags {
    transition: unset;
}

এর ক্ষেত্রে transition, unsetসমান initial, যেহেতু transitionউত্তরাধিকারসূত্রে প্রাপ্ত সম্পত্তি নয়:

a.tags {
    transition: initial;
}

এমন পাঠক যিনি সম্পর্কে জানেন unsetএবং initialবলতে পারেন যে এর সমাধানগুলির নির্দিষ্ট বাক্য গঠন সম্পর্কে চিন্তা না করেই এই সমাধানগুলি তাত্ক্ষণিকভাবে ঠিক transition।

Comments

আনসেট এবং ইনিশিয়ালগুলি

— IE- এর

caniuse.com/#feat=css-unset-value - আপনার যদি আই 1111 সমর্থন দরকার হয় আমি সম্ভবত প্রাথমিকের সাথে যেতে চাই।

— নিক মিডলউইক

Answer 4

আপনি একটি উপাদানযুক্ত উপাদানগুলির মধ্যে সমস্ত ট্রানজিশনগুলি ডিজনারাইট করতে পারেন:

সিএসএস:

.noTrans *{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}

এইচটিএমএল:

<a href="#">Content</a>
<a href="#">Content</a>
<div class="noTrans">
<a href="#">Content</a>
</div>
<a href="#">Content</a>

Comments

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

— স্কটি

গুগল মানচিত্রের উপাদান থেকে বিশ্বব্যাপী স্থানান্তরগুলি সরানোর জন্য সম্প্রতি এটি আমার জন্য খুব কার্যকর সমাধান ছিল, যা মানচিত্রের আচরণে অদ্ভুততা যুক্ত করেছিল।

— ফ্রি ওয়ার্ল্ডার

Answer 5

ডাব্লু 3 স্কুলগুলির ভিত্তিতে ডিফল্ট রূপান্তর মানটি হ'ল: all 0s ease 0sযা রূপান্তরটি অক্ষম করার ক্রস ব্রাউজারের সামঞ্জস্যপূর্ণ উপায় হওয়া উচিত।

এখানে একটি লিঙ্ক: https://www.w3schools.com/cssref/css3_pr_transition.asp