ভিউতে নেস্টেড ট্রানজিশন প্রয়োগ করা

কোনও উপাদানকে ম্লান হয়ে যাওয়া বা আউট হওয়ার সাথে সাথে অ্যানিমেটিং করা ভ্যুতে খুব সহজ - আপনাকে যা করতে হবে তা হল <ট্রান্সশন> উপাদান দিয়ে উপাদানটি ভাঙ্গতে।

তবে যেসব ক্ষেত্রে আপনি নীড় বাচ্চাদের একের পর এক প্রদর্শন করতে বা আড়াল করতে চান সেগুলি সম্পর্কে কী বলা যায়? উদাহরণস্বরূপ, মূল উপাদানটি প্রদর্শন করার পরে, উপাদান এ প্রদর্শন করুন, তারপরে উপাদান বি প্রদর্শন করুন on

এটি ভ্যুতে এখনও একটি সহজ প্রচেষ্টা। পূর্ববর্তী রূপান্তরটি পরবর্তীটি শুরু করার জন্য কখন সম্পূর্ণ হবে তা আপনার কেবলমাত্র জানতে হবে।

আপনি যদি এটি আগে না করে থাকেন এবং কীভাবে এটি করবেন তা ভাবছেন, আমি আপনার সময় সাশ্রয় করব এবং কীভাবে এটি একটি পরিষ্কার এবং নিয়ন্ত্রণযোগ্য উপায়ে করা যায় তা আপনাকে দেখাব। তবে তার আগে, আমরা কী তৈরি করতে চলেছি তা দেখতে এই কোডপেনটি দেখুন:

আপনি উপরের ডেমোতে দেখতে পাচ্ছেন, আমরা একটি সাধারণ মডেল বাক্স তৈরি করতে যাচ্ছি যা দুটি ধাপে (রূপান্তর) প্রদর্শিত হবে। প্রথমে আমরা ওভারলে পটভূমি এবং তারপরে সাদা সামগ্রী বাক্সটি দেখি।

আমি টিউটোরিয়ালটি তিনটি ভাগে বিভক্ত করব। প্রথমে আমরা বোতাম এবং মডেল বাক্স তৈরি করি। ব্যবহারকারী বোতামটি ক্লিক করে মোডাল বাক্সটি দেখতে পাবেন এবং ওভারলে পটভূমিতে ক্লিক করে এটি বন্ধ করতে পারবেন। এই বিভাগে মডেল অ্যানিমেশন ছাড়াই খোলা হয়।

দ্বিতীয় বিভাগে, আমরা এক-পদক্ষেপের রূপান্তর যুক্ত করব যাতে ওভারলে পটভূমি এবং সামগ্রীর বাক্স একই সাথে উপস্থিত হয় appear

চূড়ান্ত বিভাগে, আমরা সামগ্রীর বাক্সের জন্য নেস্টেড ট্রানজিশন যুক্ত করব যা ওভারলে রূপান্তর সম্পূর্ণ হওয়ার পরে পটভূমিতে প্রদর্শিত হবে।

অ্যানিমেশন ছাড়াই মডেল বাক্সটি দেখান

আসুন এখনই প্রোটোটাইপিং ভিউ সিএলআই 3 দিয়ে শুরু করি। সুতরাং App.vue তৈরি করুন এবং নিম্নলিখিতটিতে বিভাগটি যুক্ত করুন এক: