কোনও উপাদানটিতে একাধিক সিএসএস স্থানান্তর কীভাবে হবে?

Question

এটি একটি দুর্দান্ত সোজা প্রশ্ন কিন্তু আমি সিএসএস রূপান্তর বৈশিষ্ট্যগুলিতে খুব ভাল ডকুমেন্টেশন খুঁজে পাই না। সিএসএস স্নিপেট এখানে:

    .nav a
{
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover
{
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

যেমন আপনি দেখতে পাচ্ছেন, রূপান্তর বৈশিষ্ট্যগুলি প্রত্যেকে ওভাররাইট করে। এটি যেমন দাঁড়িয়েছে, পাঠ্য-ছায়া সঞ্জীবিত করবে তবে রঙটি নয়। আমি কীভাবে দুজনকে একই সাথে অ্যানিমেট করতে পারি? কোন উত্তরের জন্য ধন্যবাদ।

Comments

আত ভুলে যাবেন না যে transition: allসাফারি / iPad এর জন্য খুব বগী হল: joelglovier.com/writing/...

— Oğuzhan Kahyaoğlu

Answer 1

রূপান্তর বৈশিষ্ট্যগুলি সমস্ত ব্রাউজারগুলিতে কমা সীমাবদ্ধ হয় যা রূপান্তরগুলি সমর্থন করে:

.nav a {
  transition: color .2s, text-shadow .2s;
}

easeডিফল্ট টাইমিং ফাংশন, তাই আপনাকে এটি নির্দিষ্ট করতে হবে না। আপনি যদি সত্যিই চান তবে আপনার linearএটি নির্দিষ্ট করতে হবে:

transition: color .2s linear, text-shadow .2s linear;

এটি পুনরাবৃত্তি পেতে শুরু করে, তাই আপনি যদি একাধিক বৈশিষ্ট্য জুড়ে একই সময় এবং সময় কার্যকারিতা ব্যবহার করতে যাচ্ছেন transition-*তবে শর্টহ্যান্ডের পরিবর্তে বিভিন্ন বৈশিষ্ট্য ব্যবহার করে এগিয়ে যাওয়া ভাল ahead

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

Comments

আমি ধরে নিলাম কারণ ট্রান্সফর্মটি একটি শৃঙ্খলা যেখানে আদেশের বিষয়টি বিবেচনা করে, তাই সিন্ট্যাক্সটি সুন্দর মনে হয় আপনি যদি ক্রিয়ামূলক শৃঙ্খলার জন্য ব্যবহার করেন তবে রূপান্তরের জন্য সম্পূর্ণ স্বতন্ত্র উপাদানগুলির একটি নিরবচ্ছিন্ন তালিকার প্রয়োজন হয়, তাই কমাগুলি উপযুক্ত

— মিরিচান

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

— TheCuBeMan

Answer 2

আপনি সহজভাবে উল্লেখযোগ্যভাবে এটি সহ:

.nav a {
    -webkit-transition: all .2s;
}

Comments

অন্যথায় সুনির্দিষ্টভাবে উল্লেখ না করা হলে আপনি ডিফল্ট হিসাবে এটি 'ডিফল্ট' আসলেই মুছে ফেলতে পারবেন।

— joshnh

একটি দুর্দান্ত পয়েন্টের জন্য +1, তবে আমি মনে করি এটি রাখা এখানে কার্যকরভাবে সুস্পষ্ট, বিশেষত দলগুলির মধ্যে ধারাবাহিকতা এবং বোঝার জন্য।

— এক্সএমএল

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

— ইলিয়া করনাখভ

ধন্যবাদ, ক্যানেরাহাহিন আপনি কি আমাদেরকে এমন কোনও ডকুমেন্টেশন বা বেঞ্চমার্কিং সরঞ্জাম দিতে পারেন যা লোকেদের এই বিষয়টি বুঝতে সাহায্য করবে? এছাড়াও, আপনি কি এমন প্রমাণ দেখেন যা কোনও স্পেসিফাইয়ার ব্যবহার না করে 'সব' আরও খারাপ হতে দেখায়?

— এক্সএমএল

@ এক্সএমএল যেভাবে এটি ব্যাখ্যা করা হয়েছিল সেখানে দুটি নেতিবাচক প্রভাব রয়েছে। 1, ব্রাউজার 'সমস্ত' ব্যবহারের কারণে অতিরিক্ত সংস্থান যুক্ত করে। ব্রাউজারটি এমন কোনও পরিবর্তনের জন্য অপেক্ষা করছিল যা কম পারফরম্যান্ট হয় এবং পৃষ্ঠাগুলি তৈরি করতে পারে closely 2, যদি কোনও বিকাশকারী পরে কোনও ব্যাকগ্রাউন্ড রঙ রাখে যা পরে রূপান্তরিত হয় যা প্রত্যাশিত বা প্রয়োজনীয় নাও হতে পারে unexpected

— স্টিফান বার্ট

Answer 3

নীচের মতো কিছু একসাথে একাধিক ট্রানজিশনের অনুমতি দেবে:

-webkit-transition: color .2s linear, text-shadow .2s linear;
   -moz-transition: color .2s linear, text-shadow .2s linear;
     -o-transition: color .2s linear, text-shadow .2s linear;
        transition: color .2s linear, text-shadow .2s linear;

উদাহরণ: http://jsbin.com/omogaf/2

Answer 4

আপনি যদি সমস্ত বৈশিষ্ট্য অ্যানিমেটেড একই করে থাকেন তবে আপনি প্রতিটি পৃথক করে সেট করতে পারেন যা আপনাকে কোডটি পুনরাবৃত্তি না করার অনুমতি দেবে।

 transition: all 2s;
 transition-property: color, text-shadow;

এটি সম্পর্কে এখানে আরও রয়েছে: একাধিক বৈশিষ্ট্য সহ সিএসএস রূপান্তর শর্টহ্যান্ড?

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

Answer 5

.nav a {
    transition: color .2s, text-shadow .2s;
}

Answer 6

একবারে দুটি বৈশিষ্ট্য স্থানান্তরের জন্য এখানে একটি কম মিশ্রণ রয়েছে:

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
 -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
    -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
      -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
          transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}

Comments

অটোপ্রিফিক্সার আরও ভাল!

— পুনরায়

autoprefixer + স্টাইলাস এফটিডব্লু।

— জেসন লিডন

Answer 7

সময়কাল, বিলম্ব এবং সময় কার্যের জন্য বিভিন্ন মান সহ একাধিক স্থানান্তর সেট করা সম্ভব। বিভিন্ন রূপান্তর ব্যবহার বিভক্ত করতে,

button{
  transition: background 1s ease-in-out 2s, width 2s linear;
  -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}

তথ্যসূত্র: https://kolosek.com/css-transition/

Answer 8

পুরোপুরি বৈশিষ্ট্য নির্দিষ্ট করা এড়ানো সম্ভব possible

#box {
  transition: 0.4s;
  position: absolute;
  border: 1px solid darkred;
  bottom: 20px; left: 20px;
  width: 200px; height: 200px;
  opacity: 0;
}

#box.on {
  opacity: 1;
  height: 300px;
  width: 500px;
 }