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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

রেডবাস

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

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

কোড

এই বাস্তবায়নে একাধিক view-transition-name এবং কাস্টম অ্যানিমেশন ব্যবহার করা হয়েছে ( scale-down এবং scale-up )। একটি অনন্য মান সহ view-transition-name ব্যবহার করলে সাইন ইন উপাদানটি পৃষ্ঠার বাকি অংশ থেকে আলাদা হয়ে যায় এবং এটি আলাদাভাবে অ্যানিমেট হয়। একটি নতুন অনন্য view-transition-name তৈরি করলে pseudo-element tree (নিম্নলিখিত কোডে দেখানো হয়েছে) তে একটি নতুন ::view-transition-group তৈরি হয়, যা এটিকে ডিফল্ট ::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 ব্যবহার করে আমরা তাৎক্ষণিকভাবে পূর্ববর্তী বাস্তবায়নের তুলনায় কোনও প্রভাব ছাড়াই আরও মনোরম বিবর্ণ রূপান্তর পাই — অ্যান্ডি উইহালিম , সিনিয়র সফটওয়্যার ইঞ্জিনিয়ার, টোকোপিডিয়া ।

আগে

পরে

কোড

নিম্নলিখিত কোডটি একটি React ফ্রেমওয়ার্ক ব্যবহার করে এবং এতে ফ্রেমওয়ার্ক-নির্দিষ্ট কোড অন্তর্ভুক্ত রয়েছে, যেমন 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})} />

পলিসিবাজার

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

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

কোড

নিচের কোডটি পূর্ববর্তী উদাহরণগুলির মতোই। একটি বিষয় লক্ষ্য করার মতো যে ::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;
}

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

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

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

রিসোর্স

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

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

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