সিএসএস রূপান্তর শর্টহ্যান্ড একাধিক সম্পত্তি সহ?

Question

আমি একাধিক বৈশিষ্ট্য সহ সিএসএস রূপান্তর শর্টহ্যান্ডের জন্য সঠিক বাক্য গঠন খুঁজে পাচ্ছি না । এটি কিছুই করে না:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

আমি জাভাস্ক্রিপ্ট সহ শো ক্লাস যুক্ত করি। উপাদানটি উচ্চতর এবং দৃশ্যমান হয়, এটি কেবল রূপান্তর হয় না। সর্বশেষতম ক্রোম, এফএফ এবং সাফারিতে পরীক্ষা করা।

আমি কি ভুল করছি?

সম্পাদনা করুন: পরিষ্কার করার জন্য, আমি আমার সিএসএস ডাউন করার জন্য শর্টহ্যান্ড সংস্করণটি সন্ধান করছি। এটি সমস্ত বিক্রেতার উপসর্গ সহ যথেষ্ট ফুলে গেছে। উদাহরণ কোডটি প্রসারিতও করে।

Comments

এই ডকুমেন্টেশন পরীক্ষা করুন। developer.mozilla.org/en/CSS/CSS_transitions

— ওয়েবসিফনি

আপনি কি উচ্চতা এবং অস্বচ্ছতার মানগুলি পরিবর্তন করেন? অন্যথায় তারা পরিবর্তন করে না

— ইউনজেন

আমি সিএসএস স্থানান্তরের সাথে খুব বেশি পারদর্শী নই - উদ্দেশ্য অনুসারে দ্বৈত .5sমান opacityকী?

— বোল্টক্লক

ডকুমেন্টেশন একাধিক বৈশিষ্ট্য সহ শর্টহ্যান্ড সংস্করণ ব্যবহার করার জন্য উদাহরণ দেয় না। উচ্চতা 0 থেকে 200 পিক্স থেকে পরিবর্তিত হয়, 0 থেকে 1 থেকে অস্বচ্ছতা The দ্বিতীয় .5 এস অস্বচ্ছতার স্থানান্তরে বিলম্ব। আমি একটি উপাদান উচ্চতায় বৃদ্ধি পেতে চাই এবং এটি শেষ হয়ে গেলে, এটি বিবর্ণ করুন

— গ্রেগরি বলকেনস্টিজন

হ্যাঁ, বিলম্ব মান।

— বোল্টক্লক

Answer 1

বাক্য গঠন:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

নোট করুন যে সময়কালটি অবশ্যই পরে উল্লেখ করা থাকলে বিলম্বের আগে আসতে হবে।

শর্টহ্যান্ড ঘোষণার সাথে একত্রে পৃথক স্থানান্তরগুলি:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

বা কেবল তাদের সকলকে স্থানান্তর করুন:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

এখানে একটি সরল উদাহরণ । বিলম্ব সম্পত্তি সহ আরও একটি এখানে ।

---

সম্পাদনা: পূর্বে এখানে তালিকাবদ্ধ ছিল সামঞ্জস্যতা এবং সম্পর্কিত সমস্যা transition। পাঠযোগ্যতার জন্য সরানো হয়েছে।

নীচের লাইন: কেবল এটি ব্যবহার করুন। এই সম্পত্তিটির প্রকৃতি সমস্ত অ্যাপ্লিকেশনগুলির জন্য অবিচ্ছেদী এবং সামঞ্জস্যতা বিশ্বব্যাপী এখন 94% এরও বেশি।

আপনি যদি এখনও নিশ্চিত হতে চান তবে http://caniuse.com/css-transitions দেখুন

Comments

আপনি কি এই চেষ্টা করেছেন? এটি আমার পক্ষে কাজ করে না। দ্বিতীয় সম্পত্তিতে আমার বিলম্ব হওয়ায় আমি সমস্ত সম্পত্তিও ব্যবহার করতে পারি না।

— গ্রেগরি বলকেনস্টিজন

allনির্দিষ্ট বৈশিষ্ট্য তালিকাভুক্ত করার পরিবর্তে কোনও কার্যকারিতা / মেমরি / অন্যান্য প্রভাব কী? যেমন, আমি যদি রূপান্তরটি করার পরিকল্পনা করছি backgroundএবং colorশুধুমাত্র - আমি ভাল উভয় উল্লেখ, বা শুধু ব্যবহার বন্ধ all? এছাড়াও - আইআই --৯ ট্রানজিশনগুলিকে সমর্থন করে না, এবং আইই ১০ তাদের পূর্বনির্ধারিত সমর্থন করে - ms-transition:নির্দেশাবলী সহ কোনও উল্টোপাল্টা / খারাপ দিক রয়েছে কি ?

— mattstuehler

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

— Rémi ব্রেটন

আমার একই সমস্যা ছিল এবং এটি উপস্থিত হয়েছিল যে "ট্রানজিশন: ওপাসিটি 1 এস .5 এস, সর্বাধিক উচ্চতা .5 এস 0" ব্যবহার করে কাজ করা হয়নি "ট্রানজিশন: ওপাসিটি 1 এস .5 এস, সর্বাধিক উচ্চতা .5 এস 0 এস" ছিল। প্রথমবার আমি সিএসএসে শূন্য মানের জন্য প্রয়োজনীয় একটি ইউনিট দেখছি!

— ম্লারচার

এটি উল্লেখ করার মতো যে 'সমস্ত ব্যবহার' নির্দিষ্ট বৈশিষ্ট্য নির্দিষ্ট করার চেয়ে ধীর।

— নাথান

Answer 2

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

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

দ্বিতীয় ঘোষণাটি এর allউপরে সংক্ষিপ্ত বিবৃতিতে ওভাররাইড করে এবং (মাঝে মাঝে) আরও সংক্ষিপ্ত কোড তৈরি করে।

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}

<p>Hover box for demo</p>
<div class="box"></div>

ডেমো

Comments

এটি দরকারী! কেবল transition-propertyওভাররাইডের কারণে নয় , উদাহরণস্বরূপ transition-delayশর্টহ্যান্ডের পরেও অন্তত ওয়েবকিট নির্দিষ্ট করা দরকার। অন্য কথায় সাধারণভাবে সংক্ষেপে একটি বোঝা transition-delay0 এবং 0. সাধারণভাবে সংক্ষেপে সেট এটা আগে একটি স্বতন্ত্র বিলম্ব নির্বাণ ফিরে

— duncanwilcox

@ ডানকানভিলকক্স আপনি transition: [props] [duration] [easing] [delay] প্রতিটি আধুনিক ব্রাউজারে করতে পারেন

— জেসন

এই উত্তরটি গ্রহণযোগ্য উত্তরের চেয়ে অনেক বেশি পছন্দ করুন।

— এরুতান 409

সুদৃশ্য! সত্যিই মত পদ্ধতির মত!

— wasddd_

Answer 3

আমি যে এটি সঙ্গে কাজ:

element{
   transition : height 3s ease-out, width 5s ease-in;
}

Comments

এটি আমি যা খুঁজছিলাম - একাধিক সম্পত্তি জন্য শর্টহ্যান্ড। ধন্যবাদ!

— অ্যাডাম মাইসা

Answer 4

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

"রূপান্তর: অস্বচ্ছতা .5 এস .5 এস;"

আপনি কি চান এটি কি? যদি তা না হয় এবং আপনি উচ্চতার রূপান্তরটি দেখতে চান, এটি পরিবর্তিত হওয়ার পুরো সময়কালে আপনার শূন্যতার অস্বচ্ছতা থাকতে পারে না।

Comments

এটি কোনওভাবেই কাজ করে না, কারণ অস্বচ্ছতার সংক্রমণের সময় উচ্চতা 0 থাকবে।

— কিসাউ

Answer 5

এটি আমাকে বুঝতে বা প্রবাহিত করতে সহায়তা করেছিল, কেবলমাত্র যা সঞ্চার করার জন্য আমার প্রয়োজন ছিল:

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

~ এটি '.বেস' শ্রেণীর মধ্যে সমস্ত রূপান্তর বৈশিষ্ট্য (সময়কাল, রূপান্তর-সময়-কার্যকারিতা ইত্যাদি) এর জন্য প্রযোজ্য

Answer 6

আমি মনে করি এটি নিয়ে এই কাজ:

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;