Vue <Transition> Component

Vue <ট্রানজিশন> উপাদান

<Transition> উপাদানটি Vue-এর সবচেয়ে দরকারী এবং জনপ্রিয় অন্তর্নির্মিত উপাদানগুলির মধ্যে একটি। এটি উপাদানগুলিকে অ্যানিমেট করতে সাহায্য করে যখন সেগুলি v-if, v-শো বা গতিশীল উপাদানগুলির সাথে যুক্ত বা সরানো হয়।

🎭প্রধান বৈশিষ্ট্য:

স্বয়ংক্রিয়ভাবে তৈরি হওয়া CSS ক্লাস বা JavaScript ট্রানজিশন হুকগুলির সাহায্যে কীভাবে উপাদানগুলি অ্যানিমেটেড করা হয় তা <Transition> উপাদান নিয়ন্ত্রণ করে।

উদাহরণ

আপনার নিজস্ব Vue সার্ভার পান

বিল্ট-ইন <Transition> এলিমেন্ট ব্যবহার করে v-if দিয়ে সরানো হলে <p> এলিমেন্ট অ্যানিমেটিং করা:

<Transition>
  <p v-if="exists">Hello World!</p>
</Transition>

নীচে আরো উদাহরণ দেখুন.

সংজ্ঞা এবং প্রয়োগ

অন্তর্নির্মিত <Transition> উপাদানটি উপাদানগুলিকে অ্যানিমেট করতে ব্যবহৃত হয় যখন সেগুলি v-if, v-show বা গতিশীল উপাদানগুলির সাথে যুক্ত বা সরানো হয়।

উপাদানগুলি কীভাবে অ্যানিমেটেড হয় তার নিয়মগুলি স্বয়ংক্রিয়ভাবে তৈরি হওয়া ক্লাস বা জাভাস্ক্রিপ্ট ট্রানজিশন হুকের মধ্যে লেখা হয়। নীচের টেবিল দেখুন.

⚠️কী নিয়ন্ত্রণ:

একটি <Transition> উপাদানের মূল অবস্থানে শুধুমাত্র একটি উপাদান থাকতে পারে। একাধিক উপাদান অ্যানিমেট করতে <TransitionGroup> ব্যবহার করুন।

প্রপস

প্রপ	ব্যাখ্যা
none	ডিফল্ট
appear	সত্য হিসাবে সেট করা হলে, উপাদানটি প্রথমবার মাউন্ট করার সময়ও অ্যানিমেটেড হয়। ডিফল্ট মান মিথ্যা।
mode	mode="out-in" নিশ্চিত করে যে পরবর্তী উপাদানটি প্রাথমিক উপাদান প্রস্থান করার আগে প্রবেশ করে। mode="in-out" নিশ্চিত করে যে পুরানো উপাদান প্রস্থান করার আগে নতুন উপাদান প্রবেশ করে। ডিফল্ট হল নতুন উপাদান প্রবেশ করার সাথে সাথে পুরানো উপাদানটি প্রস্থান করে।
name	একটি পরিবর্তনের নাম উল্লেখ করুন। যদি একাধিক ট্রানজিশন থাকে, তাহলে তাদের আলাদা করার জন্য আপনাকে অবশ্যই তাদের অনন্য নাম দিতে হবে। name="swirl" নিশ্চিত করে যে CSS ট্রানজিশন ক্লাসগুলি ডিফল্ট উপসর্গ v- এর পরিবর্তে swirl- দিয়ে শুরু হয়।
css	বুলিয়ান। :css="false" Vue কম্পাইলারকে বলে যে এই রূপান্তরের জন্য কোন CSS ট্রানজিশন ক্লাস ব্যবহার করা হয় না, শুধুমাত্র JavaScript হুক ব্যবহার করা হয়। এই প্রপ সেট করা থাকলে, সম্পন্ন() কলব্যাক অবশ্যই এন্টার এবং লিভ হুকের ভিতরে ব্যবহার করতে হবে।
type	'অ্যানিমেশন' বা 'ট্রানজিশন' একটি ট্রানজিশন সম্পূর্ণ হওয়ার জন্য অপেক্ষা করা উচিত কিনা তা নির্দিষ্ট করুন। যদি একটি CSS অ্যানিমেশন এবং একটি CSS ট্রানজিশন উভয়ই সেট করা থাকে এবং এই ধরনের প্রপ সেট করা না থাকে, Vue দুটির মধ্যে দীর্ঘতম সময়কাল খুঁজে পাবে এবং এটিকে রূপান্তর সময় হিসাবে ব্যবহার করবে।
duration	'এন্টার' এবং 'লিভ'-এর জন্য রূপান্তর সময়ের দৈর্ঘ্য নির্দিষ্ট করুন। সিএসএস অ্যানিমেশন বা সিএসএস ট্রানজিশন শেষ হলে ডিফল্ট শেষ হয়। নির্দিষ্ট সময়গুলিকে সংজ্ঞায়িত করা যেতে পারে যেমন :duration="{enter:2000, leave:1000 }", অথবা like duration="1000"৷
enterFromClass, enterActiveClass, enterToClass, appearFromClass, appearActiveClass, appearToClass, leaveFromClass, leaveActiveClass, leaveToClass	এই প্রপস ব্যবহার করে ট্রানজিশন ক্লাসের নাম পরিবর্তন করুন। আপনি যদি এন্টার-অ্যাক্টিভ-ক্লাস="এন্টারিং" এর মতো এই প্রপগুলির মধ্যে একটি ব্যবহার করেন, আপনি ডিফল্ট .v-enter-active এর পরিবর্তে CSS-এ এই ট্রানজিশন ক্লাসটিকে .entering হিসাবে নির্দিষ্ট করতে পারেন।

CSS ট্রানজিশন ক্লাস

যখন আমরা <Transition> উপাদান ব্যবহার করি, তখন আমরা স্বয়ংক্রিয়ভাবে ছয়টি ভিন্ন CSS ক্লাস পাই যা আমরা উপাদানগুলিকে যুক্ত বা সরানোর সাথে সাথে অ্যানিমেট করতে ব্যবহার করতে পারি।

ট্রানজিশন ক্লাস	ব্যাখ্যা
v-enter-from	এন্টারিং বেস শুরু হলে উপাদানটির প্রাথমিক শৈলী হয়
v-enter-active	উপাদানের শৈলী পর্যায়ে প্রবেশের সময়
v-enter-to	এলিমেন্টের স্টাইল বেসে প্রবেশ করার ডানদিকে
v-leave-from	উপাদানটির প্রাথমিক শৈলী হল যখন ছেড়ে যাওয়া বেস শুরু হয়
v-leave-active	উপাদান এর শৈলী সময় ফেজ ছেড়ে
v-leave-to	উপাদানের শৈলী বেস ছেড়ে ডান শেষে

জাভাস্ক্রিপ্ট ট্রানজিশন হুক

উপরের ট্রানজিশন ক্লাসগুলি ইভেন্টগুলির সাথে মিলে যায় যা আমরা জাভাস্ক্রিপ্ট কোড চালানোর জন্য হুক করতে পারি।

জাভাস্ক্রিপ্ট উদাহরণ	ব্যাখ্যা
before-enter	এন্টার বলা হয় বেসের শুরুতে ডানদিকে
enter	এন্টার পর্বের সময় বলা হয়, 'আগে-প্রবেশ' হুকের পরে
after-enter	ট্রানজিশনের শেষে এন্টার সঠিকভাবে বলা হয়
enter-cancelled	এন্টার ট্রানজিশন বাতিল হলে কল করা হয়
before-leave	বেসের শুরুতে ছুটি বলা হয়
leave	ছুটির পর্বে ডাকা হয়, 'আগে ছুটি' হুকের পরে
after-leave	স্থানান্তর শেষে সঠিকভাবে ছুটি বলা হয়
leave-cancelled	এটি শুধুমাত্র তখনই বলা হয় যদি ভি-শো ব্যবহার করা হয় এবং ছুটির ভিত্তি বাতিল করা হয়

Vue <ট্রানজিশন> কম্পোনেন্ট টিউটোরিয়াল

Vue-তে <Transition> উপাদান সম্পর্কে আপনার বোঝার পরীক্ষা করতে এই টিউটোরিয়ালটি চেষ্টা করুন।

❓Vue-তে <Transition> উপাদানটি কিসের জন্য ব্যবহৃত হয়?

উপাদান দ্রুত লোড করার জন্য

✗ ভুল! <Transition> উপাদান লোডিং গতি উন্নত করে না, কিন্তু অ্যানিমেশন প্রদান করে

উপাদানগুলির মধ্যে ডেটা বিনিময়ের জন্য

✗ ভুল! <Transition> ডেটা স্থানান্তরের জন্য নয়

উপাদান যোগ করা বা সরানো হলে অ্যানিমেশন প্রদান করতে

✓ ঠিক আছে! <Transition> উপাদানটি অ্যানিমেশন সরবরাহ করতে ব্যবহৃত হয় যখন উপাদানগুলি v-if, v-show বা গতিশীল উপাদানগুলির সাথে প্রবেশ করে বা প্রস্থান করে।

স্বয়ংক্রিয়ভাবে উপাদান আপডেট করতে

✗ ভুল! <Transition> স্বয়ংক্রিয় আপডেট প্রদান করে না

মূল উদাহরণ

উদাহরণ 1: স্লাইড অ্যানিমেশন

একটি <p> উপাদান ডক করার সময় ভিতরে এবং বাইরে ভেঙে পড়ে।

উদাহরণ 8: mode="out-in"

ইমেজ মাধ্যমে ব্লিপ. mode="out-in" পুরানো ছবি সরানো না হওয়া পর্যন্ত নতুন ছবি যুক্ত হতে বাধা দেয়।

উদাহরণ 9: গতিশীল উপাদান

উপাদানগুলির মধ্যে রূপান্তরগুলি অ্যানিমেটেড।

উদাহরণ 10: :css="false" prop

CSS এর পরিবর্তে JavaScript হুক ব্যবহার করা হয়।

সর্বোত্তম অনুশীলন

<Transition> উপাদান ব্যবহার করার সময় এই নির্দেশিকাগুলি অনুসরণ করুন:

একক উপাদানের জন্য <Transition> ব্যবহার করুন

একাধিক উপাদানের জন্য <TransitionGroup> ব্যবহার করুন

অ্যানিমেশন সিকোয়েন্স নিয়ন্ত্রণ করতে মোড প্রপ ব্যবহার করুন

একাধিক ট্রানজিশন থাকলে অনন্য নাম ব্যবহার করুন

জটিল অ্যানিমেশনের জন্য জাভাস্ক্রিপ্ট হুক ব্যবহার করুন