আমি কীভাবে CSS3 রূপান্তরটি ব্যাকগ্রাউন্ড-অবস্থান ব্যতীত সমস্ত বৈশিষ্ট্যে প্রয়োগ করব?

Question

আমি ব্যাকগ্রাউন্ড-অবস্থান বাদে সমস্ত বৈশিষ্ট্যে সিএসএস রূপান্তর প্রয়োগ করতে চাই। আমি এটি এইভাবে করার চেষ্টা করেছি:

.csstransitions a {
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}

.csstransitions a {
    -webkit-transition: background-position 0s ease 0s;                 
    -moz-transition: background-position 0s ease 0s;                
    -o-transition: background-position 0s ease 0s;  
    -ms-transition: background-position 0s ease 0s;         
    transition: background-position 0s ease 0s;
}

প্রথমে আমি সমস্ত বৈশিষ্ট্যকে স্থানান্তরে সেট করেছিলাম এবং তারপরে আমি ব্যাকগ্রাউন্ড-অবস্থানের সম্পত্তিটির জন্য পুরোপুরি রূপান্তরটি ওভাররাইট করার চেষ্টা করেছি।

তবে এটি অন্যান্য সমস্ত বৈশিষ্ট্যও পুনরায় সেট করে বলে মনে হচ্ছে - সুতরাং মূলত কোনও রূপান্তর আর ঘটবে বলে মনে হয় না।

সমস্ত বৈশিষ্ট্য তালিকাভুক্ত না করে এটি করার কোনও উপায় আছে?

Comments

হাই, আমি আসলে এই সমস্যাটি খুঁজছি আপনি কোন গ্রহণযোগ্য উত্তর পেয়েছেন?

— মিলচে প্যাটার্ন

Answer 1

ফায়ারফক্সে কাজ করে এমন একটি সমাধান এখানে দেওয়া হয়েছে:

transition: all 0.3s ease, background-position 1ms;

আমি একটি ছোট ডেমো তৈরি করেছি: http://jsfiddle.net/aWzwh/

Comments

কোন কারণে 1msআমার পক্ষে কাজ করে নি, তবে 0করেছে।

— Flimm

@ ফ্লিম, আপনি কোন ব্রাউজার ব্যবহার করছেন? এবং "কাজ করে না" দিয়ে আপনি কী বোঝাতে চেয়েছিলেন, কিছুই অ্যানিমেট করেনি?

— ফেলিক্স এডেলম্যান

আমার জন্য 1msকাজ 1ms noneকরেনি , কিন্তু করেছেন! @ এরিকসোকো 0msবা 0sকাজও করে।

— বিসিডোডার

সময়ের ইউনিটগুলির একটি ইউনিট থাকতে হবে। 0 যেমন 4 কাজ করে না ঠিক তেমন কাজ করে না, তবে 0s যেমন 0s কাজ করবে তেমন কাজ করবে।

— ESR

আমি এত দিন এটির জন্য অনুসন্ধান করেছি, আপনাকে ধন্যবাদ, @ ফেলিক্সএডেলম্যান !!

— তাতসু

Answer 2

আশা করি দেরি হবে না। এটি শুধুমাত্র একটি লাইন ব্যবহার করে সম্পন্ন হয়!

-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 

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

এখানে একটি কার্যকারী উদাহরণ: http://jsfiddle.net/H2jet/

Comments

আমি এটি Chrome এ চেষ্টা করছি এবং এটি আমার পক্ষে কাজ করে না বলে মনে হচ্ছে। allট্রানজিশন-সম্পত্তি কোন ব্যাপার কি অন্যদের ওভাররাইড বলে মনে হয়।

— animuson

মজাদার. আমি অনুমান করি যে আমি এটি অন্যান্য বৈশিষ্ট্যগুলির সাথে পরীক্ষা করে দেখিনি। যখন আমি চেষ্টা করেছি color 0এটি কাজ করেছে, তবে এটি অবশ্যই কাজ করছে না background-position 0। এমনকি background 0আমার জন্য কোনও ফলাফল তৈরি করে না ... এখানে গেমিং.এসই মেনু থেকে জেগফিল আমি জালিয়াতি করেছি। সত্যি কথা বলতে আমি এমনকি background-positionপ্রাথমিকভাবে পরীক্ষাও করেছি কারণ এই প্রশ্নটি বিশেষত উল্লেখ করেছে এবং আমিই নিজেকে পরিবর্তন করার চেষ্টা করছিলাম।

— animuson

এটি আমার জন্য ক্রোমে কাজ করত। এটি এখনও আই 11 এ কাজ করছে তবে এই সপ্তাহ হিসাবে সমস্ত সম্পত্তি এখন লাইনটিতে পরে কিছুতেই ওভাররাইড করে।

— cirrus

@ সাইরাস যেমন বলেছিল, ক্রোম আর কোনও 0 সেকেন্ড সময়কাল সম্মান করে না, তবে আপনি এর পরিবর্তে খুব অল্প সময়কাল প্রদান করে কাজ করতে পারেন.1ms

— গেটফ্রি

এটি যদি শূন্য-না-দ্বিতীয় দ্বিতীয় মেয়াদ সরবরাহ করা হয় তবে এটি Chrome এবং ফায়ারফক্স উভয় ক্ষেত্রেই কাজ করে।

— নাইশিল ভারধন

Answer 3

এটা চেষ্টা কর...

* {
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}
a {
    -webkit-transition: background-position 1ms linear;
    -moz-transition: background-position 1ms linear;
    -o-transition: background-position 1ms linear;
    transition: background-position 1ms linear;
}

Comments

"এই চেষ্টা করুন" কেবলমাত্র কোড-উত্তরগুলি সেরা নয়। আপনি যা করছেন তার কিছুটা ব্যাখ্যা করা ভাল।

— এলোমেলো ব্যবহারকারীর_নামা

Answer 4

আপনি স্ট্যান্ডার্ড ডাব্লু 3 সি উপায় ব্যবহার করে দেখতে পারেন:

.transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; }

http://jsfiddle.net/H2jet/60/

Answer 5

যে কেউ সংক্ষিপ্ত পথের সন্ধান করে, বিলম্বের সাথে একটি নির্দিষ্ট সম্পত্তি ব্যতীত সমস্ত সম্পত্তিগুলির জন্য রূপান্তর যুক্ত করার জন্য , সেখানে পার্থক্য সম্পর্কে সচেতন হন এমনকি আধুনিক ব্রাউজারগুলির মধ্যে ।

নীচে একটি সাধারণ ডেমো পার্থক্য দেখায়। সম্পূর্ণ কোড পরীক্ষা করে দেখুন

div:hover {
  width: 500px;
  height: 500px;
  border-radius: 0;
  transition: all 2s, border-radius 2s 4s;
}

Chrome নীচের মত দুটি অ্যানিমেশন (যা আমার প্রত্যাশা মতো) "সংযুক্ত" করবে:

সাফারি যখন এটি "আলাদা" করে (যা প্রত্যাশা করা যায় না):

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

Comments

প্রকৃতপক্ষে. এটি সমালোচনামূলক অন্তর্দৃষ্টি। পঙ্গু হিসাবে প্রতিটি সম্পত্তি পৃথক পৃথকভাবে নির্দিষ্ট করা প্রয়োজন all, এটি ব্রাউজারগুলির মধ্যে কাঙ্ক্ষিত আচরণ পাওয়ার একমাত্র উপায় যে এটা জানা দরকারী।

— এলোমেলো ব্যবহারকারীর_নাম

Answer 6

চেষ্টা করুন:

-webkit-transition: all .2s linear, background-position 0;

এটি আমার জন্য অনুরূপ কিছুতে কাজ করেছিল ..

Comments

ব্যাকগ্রাউন্ড-পজিশন 0 তে স্থির করা = ব্যাকগ্রাউন্ড-পজিশন থেকে স্থানান্তর সরিয়ে নেওয়া নয়। তাই না?

— মিলচে প্যাটার্ন

এটি কখনও কাজ করতে পারে না। পরে রূপান্তর সম্পত্তি পুনরায় সংজ্ঞায়িত করে আপনি পূর্ববর্তী স্থানান্তরের সম্পত্তিটিকে সম্পূর্ণরূপে ওভাররাইড করে, যেন এটি কখনও অস্তিত্বহীন। তারা একীভূত হয় না।

— animuson