ট্রানজিশন কেস স্টাডি দেখুন

Swetha Gopalakrishnan

Saurabh Rajpal

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

• উন্নত ব্যবহারকারীর অভিজ্ঞতা: মসৃণ রূপান্তর এবং চাক্ষুষ সংকেত ব্যবহারকারীদের UI-তে পরিবর্তনের মাধ্যমে গাইড করে, যা নেভিগেশনকে স্বাভাবিক এবং কম ঝাঁকুনি অনুভব করে।
• ভিজ্যুয়াল ধারাবাহিকতা: ভিউয়ের মধ্যে ধারাবাহিকতার অনুভূতি বজায় রাখা জ্ঞানীয় লোড কমায় এবং ব্যবহারকারীদের অ্যাপ্লিকেশনের মধ্যে ভিত্তিক থাকতে সাহায্য করে।
• কর্মক্ষমতা: API যতটা সম্ভব কিছু প্রধান থ্রেড সংস্থান ব্যবহার করার চেষ্টা করে যা মসৃণ অ্যানিমেশন তৈরি করে।
• আধুনিক নান্দনিক: উন্নত রূপান্তরগুলি একটি পালিশ এবং আকর্ষক ব্যবহারকারীর অভিজ্ঞতায় অবদান রাখে।

এই পোস্টটি একটি সিরিজের অংশ যা আলোচনা করে যে কীভাবে ইকমার্স কোম্পানি নতুন CSS এবং UI বৈশিষ্ট্য ব্যবহার করে তাদের ওয়েবসাইট উন্নত করেছে। এই প্রবন্ধে, দেখুন কিভাবে কিছু কোম্পানি বাস্তবায়ন করেছে এবং ভিউ ট্রানজিশন API থেকে উপকৃত হয়েছে।

লাল বাস

redBus সর্বদা তাদের নেটিভ এবং ওয়েব অভিজ্ঞতার মধ্যে যতটা সম্ভব সমতা তৈরি করার চেষ্টা করেছে। ভিউ ট্রানজিশন API-এর আগে, আমাদের ওয়েব সম্পদগুলিতে এই অ্যানিমেশনগুলি বাস্তবায়ন করা চ্যালেঞ্জিং ছিল। কিন্তু API-এর সাহায্যে, ওয়েব অভিজ্ঞতাকে আরও অ্যাপের মতো করে তুলতে আমরা একাধিক ব্যবহারকারীর যাত্রায় ট্রানজিশন তৈরি করাকে স্বজ্ঞাত বলে মনে করেছি। পারফরম্যান্সের সুবিধার সাথে এই সমস্ত কিছুর জন্য এটিকে সমস্ত ওয়েবসাইটের জন্য একটি বৈশিষ্ট্য থাকা আবশ্যক করে তোলে।— অমিত কুমার , সিনিয়র ইঞ্জিনিয়ারিং ম্যানেজার, রেডবাস ।

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

কোড

এই বাস্তবায়ন একাধিক view-transition-name এবং কাস্টম অ্যানিমেশন ( scale-down এবং scale-up ) ব্যবহার করে। একটি অনন্য মান সহ view-transition-name ব্যবহার করে সাইন ইন কম্পোনেন্টটিকে পৃষ্ঠার বাকি অংশ থেকে আলাদা করে অ্যানিমেট করে। একটি নতুন অনন্য view-transition-name তৈরি করা ছদ্ম-উপাদান ট্রিতে একটি নতুন ::view-transition-group তৈরি করে (নিম্নলিখিত কোডে দেখানো হয়েছে), এটিকে ডিফল্ট ::view-transition-group(root) থেকে আলাদাভাবে ম্যানিপুলেট করার অনুমতি দেয়। ::view-transition-group(root) ।

::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)   
└─…

//Code for VT for login
  if (!document.startViewTransition) {
   this.setState(
     {
       closeSigninModal: condition ? true : false
     },
     () => {
       if (closeSigninCb) {
         closeSigninCb();
       }
     }
   );
 } else {
   const transition = document.startViewTransition();
   transition.ready.finally(() => {
     setTimeout(() => {
       this.setState(
         {
           closeSigninModal: condition ? true : false
         },
         () => {
           if (closeSigninCb) {
             closeSigninCb();
           }
         }
       );
     }, 500);
   });
 }

.signin_open {
 view-transition-name: signin;
}

.signin_close  {
 view-transition-name: signinclose;
}

::view-transition-group(signin),
::view-transition-group(signinclose) {
 animation-duration: 0.5s;
}

::view-transition-old(signin) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
 animation-name: -ua-view-transition-fade-in, scale-up;
}

::view-transition-new(signinclose) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}

@keyframes scale-down {
 to {
     scale: 0;
 }
}

@keyframes scale-up {
 from {
     scale: 0;
 }
}

টোকোপিডিয়া

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

বাস্তবায়নটি খুবই সহজ, startViewTransition ব্যবহার করে আমরা অবিলম্বে কোনো প্রভাব ছাড়াই পূর্ববর্তী বাস্তবায়নের তুলনায় আরও মনোরম ফেইডিং ট্রানজিশন পাই— অ্যান্ডি উইহালিম , সিনিয়র সফটওয়্যার ইঞ্জিনিয়ার, টোকোপিডিয়া ।

আগে

পরে

কোড

নিম্নলিখিত কোডটি একটি প্রতিক্রিয়া ফ্রেমওয়ার্ক ব্যবহার করে এবং ফ্রেমওয়ার্ক-নির্দিষ্ট কোড অন্তর্ভুক্ত করে, যেমন flushSync. ভিউ ট্রানজিশন বাস্তবায়নের জন্য ফ্রেমওয়ার্কের সাথে কাজ করার বিষয়ে আরও পড়ুন। এটি একটি মৌলিক বাস্তবায়ন যা ব্রাউজার startViewTransition সমর্থন করে কিনা তা পরীক্ষা করে এবং যদি তাই হয় তবে রূপান্তরটি করে। অন্যথায়, এটি ডিফল্ট আচরণে ফিরে আসে।

const handleClick =
  ({ url, index }) =>
  () => {
    if ('startViewTransition' in document) { //check if browser supports VT
      document.startViewTransition(() => {
        flushSync(() => {
          setDisplayImage({ url, index });
          setActiveImageIndex(index);
        });
      });
    } else { //if VT is not supported, fall back to default behavior
      setDisplayImage({ url, index });
      setActiveImageIndex(index);
    }
  };

...

<Thumbnail onClick={handleClick({url, index})} />

পলিসিবাজার

পলিসিবাজারের বিনিয়োগ উল্লম্ব সাহায্য টিপ উপাদানগুলির জন্য ভিউ ট্রানজিশন API ব্যবহার করেছে যেমন "কেন কিনুন", সেগুলিকে দৃশ্যত আকর্ষণীয় করে তোলে এবং এই ধরনের বৈশিষ্ট্যগুলির ব্যবহার উন্নত করে৷

ভিউ ট্রানজিশন অন্তর্ভুক্ত করে, আমরা বিভিন্ন রাজ্যে অ্যানিমেশন পরিচালনার জন্য দায়ী পুনরাবৃত্তিমূলক CSS এবং JavaScript কোড বাদ দিয়েছি। এটি উন্নয়ন প্রচেষ্টাকে বাঁচিয়েছে এবং ব্যবহারকারীর অভিজ্ঞতাকে উল্লেখযোগ্যভাবে উন্নত করেছে।— আমান সনি , টেক লিড, পলিসিবাজার ।

কোড

নিম্নলিখিত কোড পূর্ববর্তী উদাহরণ অনুরূপ. উল্লেখ্য একটি বিষয় হল ::view-transition-old(root) এবং ::view-transition-new(root) এর ডিফল্ট শৈলী এবং অ্যানিমেশনগুলিকে ওভাররাইড করার ক্ষমতা। এই ক্ষেত্রে, ডিফল্ট animation-duration 0.4s এ আপডেট করা হয়েছিল।

togglePBAdvantagePopup(state: boolean) {
  this.showPBAdvantagePopup = state;

  if(!document.startViewTransition) {
    changeState();
    return;
  }

  document.startViewTransition(() => {changeState();});

  function changeState() {
    document.querySelector('.block_section').classList.toggle('hide');
    document.querySelector('.righttoggle_box').classList.toggle('show');
  }
}

.righttoggle_box{
  view-transition-name: advantage-transition;
}

.block_section{
  view-transition-name: advantage-transition;
}

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.4s;
}

ভিউ ট্রানজিশন API ব্যবহার করার সময় যে বিষয়গুলি বিবেচনা করতে হবে৷

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

একটি ভিউ ট্রানজিশন সক্রিয় থাকা অবস্থায় (ট্রানজিশনিং), এটি বাকি UI-এর উপরে একটি নতুন স্তর যোগ করবে। সুতরাং, হোভারে ট্রানজিশন ট্রিগার করা এড়িয়ে চলুন, কারণ mouseLeave ইভেন্টটি অপ্রত্যাশিতভাবে ট্রিগার হবে (যখন প্রকৃত কার্সার এখনও সরছে না)।

সম্পদ

• ভিউ ট্রানজিশন এপিআই সহ মসৃণ এবং সহজ রূপান্তর
• ব্যাখ্যাকারী: MPA-এর জন্য রূপান্তর দেখুন
• কেস স্টাডি: ভিউ ট্রানজিশনের মাধ্যমে নিরবচ্ছিন্ন নেভিগেশন সম্ভব হয়েছে
• কেস স্টাডি: ওয়েব কি করতে পারে!? | অ্যাপের মতো নেভিগেশন সরবরাহ করুন
• ইন্টারপ প্রস্তাব: ব্রাউজার জুড়ে ভিউ ট্রানজিশন উপলব্ধ করুন
• আপনি একটি বাগ রিপোর্ট বা একটি নতুন বৈশিষ্ট্য অনুরোধ করতে চান? আমরা SPA এবং MPA এর জন্য আপনার কাছ থেকে শুনতে চাই।

এই সিরিজের অন্যান্য নিবন্ধগুলি অন্বেষণ করুন যেগুলি ইকমার্স কোম্পানিগুলি নতুন CSS এবং UI বৈশিষ্ট্যগুলি যেমন স্ক্রোল-চালিত অ্যানিমেশন, পপওভার, কন্টেইনার কোয়েরি এবং has() নির্বাচক ব্যবহার করে কীভাবে উপকৃত হয়েছে সে সম্পর্কে কথা বলে।

• কেন ওয়েব UI ক্ষমতা আপনার ইকমার্স সাইটের জন্য গুরুত্বপূর্ণ?
• স্ক্রোল-চালিত অ্যানিমেশন কেস স্টাডি
• Popover API কেস স্টাডি
• কন্টেইনার কোয়েরি কেস স্টাডি
• :has() নির্বাচক কেস স্টাডি