মোশন হল যেকোনো ডিজিটাল অভিজ্ঞতার একটি মূল অংশ, যা আপনার ব্যবহারকারীকে একটি মিথস্ক্রিয়া থেকে পরবর্তীতে নির্দেশিত করে। কি��্তু ওয়েব প্ল্যাটফর্মে মসৃণ অ্যানিমেশনে কয়েকটি ফাঁক রয়েছে। এর মধ্যে রয়েছে সহজেই এন্ট্রি এবং এক্সিট অ্যানিমেশানগুলিকে অ্যানিমেট করার ক্ষমতা এবং ডায়ালগ এবং পপোভারের মতো বাতিলযোগ্য উপাদানগুলির জন্য উপরের স্তরে এবং থেকে মসৃণভাবে অ্যানিমেট করার ক্ষমতা।
এই ফাঁকগুলি পূরণ করতে, Chrome 116 এবং 117-এ চারটি নতুন ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য রয়েছে, যা বিচ্ছিন্ন বৈশিষ্ট্যগুলির জন্য মসৃণ অ্যানিমেশন এবং ট্রানজিশন সক্ষম করে৷
এই চারটি নতুন বৈশিষ্ট্য অন্তর্ভুক্ত:
- একটি কীফ্রেম টাইমলাইনে
display
এবংcontent-visibility
অ্যানিমেট করার ক্ষমতা (Chrome 116 থেকে)। -
display
মত পৃথক বৈশিষ্ট্যের রূপান্তর সক্ষম করতেallow-discrete
কীওয়ার্ড সহtransition-behavior
বৈশিষ্ট্য (Chrome 117 থেকে)। -
display: none
থেকে এন্ট্রি ইফেক্ট অ্যানিমেট করার জন্য@starting-style
নিয়ম: কোনোটিই নয় এবং টপ-লেয়ারে (ক্রোম 117 থেকে)। - একটি অ্যানিমেশনের সময় শীর্ষ-স্তরের আচরণ নিয়ন্ত্রণ করার জন্য
overlay
বৈশিষ্ট্য (Chrome 117 থেকে)।
কীফ্রেমে অ্যানিমেশন প্রদর্শন করুন
Chrome 116 থেকে, আপনি কীফ্রেম নিয়মে display
এবং content-visibility
ব্যবহার করতে পারেন। কীফ্রেমটি ঘটলে এইগুলি তখন অদলবদল হবে। এটি সমর্থন করার জন্য কোন অতিরিক্ত নতুন মান প্রয়োজন নেই:
.card {
animation: fade-out 0.5s forwards;
}
@keyframes fade-out {
100% {
opacity: 0;
display: none;
}
}
পূর্ববর্তী উদাহরণটি 0.5 সেকেন্ড সময়কাল ধরে অস্বচ্ছতাকে 0 এ অ্যানিমেট করে এবং তারপরে প্রদর্শন সেট করে না। উপরন্তু, forwards
কীওয়ার্ড নিশ্চিত করে যে অ্যানিমেশনটি তার শেষ অবস্থায় থাকে, যাতে এটি প্রয়োগ করা উপাদানটি display: none
এবং opacity: 0
।
এটি একটি সাধারণ উদাহরণ যা একটি ট্রানজিশন দিয়ে আপনি কী করতে পারেন তা অনুকরণ করে ( ট্রানজিশন বিভাগে ডেমো দেখুন)। ট্রানজিশন, তবে, আরও জটিল অ্যানিমেশন তৈরি করতে অক্ষম, যেমন নিম্নলিখিত উদাহরণ:
.card {
animation: spin-and-delete 1s ease-in forwards;
}
@keyframes spin-and-delete {
0% {
transform: rotateY(0);
filter: hue-rotate(0);
}
80% {
transform: rotateY(360deg);
filter: hue-rotate(180deg);
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}
spin-and-delete
অ্যানিমেশন হল একটি প্রস্থান অ্যানিমেশন। প্রথমে, কার্ডটি y-অক্ষে ঘুরবে, একটি হিউ-ঘূর্ণনের মাধ্যমে চলবে, এবং তারপর টাইমলাইনের মাধ্যমে 80%
এ, এর অস্বচ্ছতা 1 থেকে 0 এ রূপান্তরিত করবে। অবশেষে, কার্ডটি display: block
display: none
।
এই প্রস্থান অ্যানিমেশনগুলির জন্য, এগুলি সরাসরি একটি উপাদানে প্রয়োগ করার পরিবর্তে, আপনি অ্যানিমেশনগুলির জন্য একটি ট্রিগার সেট আপ করতে পারেন৷ উদাহরণস্বরূপ, একটি ইভেন্ট শ্রোতাকে একটি বোতামের সাথে সংযুক্ত করে যা অ্যানিমেশন প্রয়োগ করতে একটি ক্লাস ট্রিগার করে, যেমন:
.spin-out {
animation: spin-and-delete 1s ease-in forwards;
}
document.querySelector('.delete-btn').addEventListener('click', () => {
document.querySelector('.card').classList.add('spin-out');
})
উপরের উদাহরণে এখন display:none
। ������ অ���ে�� ক্ষেত্রে রয়েছে যেখানে আপনি এটিকে আরও এগিয়ে নিতে চান এবং অ্যানিমেশনটি প্রথমে শেষ করার অনুমতি দেওয়ার জন্য একটি টাইমআউট সহ DOM নোডটি সরাতে চান।
বিচ্ছিন্ন অ্যানিমেশন পরিবর্তন করা
কীফ্রেমের সাথে বিচ্ছিন্ন বৈশিষ্ট্যগুলি অ্যানিমেট করার বিপরীতে, পৃথক বৈশিষ্ট্যগুলি স্থানান্তর করতে আপনাকে allow-discrete
রূপান্তর আচরণ মোড ব্যবহার করতে হবে।
transition-behavior
সম্পত্তি
allow-discrete
মোড হল যা বিচ্ছিন্ন রূপান্তরকে সম্ভব করে তোলে এবং এটি transition-behavior
বৈশিষ্ট্যের একটি মান। transition-behavior
দুটি মান গ্রহণ করে: normal
এবং allow-discrete
।
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
opacity: 0;
display: none;
}
transition
শর্টহ্যান্ডও এই মান সেট করে, তাই আপনি সম্পত্তিটি বাদ দিতে পারেন এবং পরিবর্তে প্রতিটি ট্রানজিশনের জন্য transition
শর্টহ্যান্ডের শেষে allow-discrete
কীওয়ার্ড ব্যবহার করতে পারেন।
.card {
transition: opacity 0.5s, display 0.5s allow-discrete;
}
.card.fade-out {
opacity: 0;
display: none;
}
আপনি যদি একাধিক বিচ্ছিন্ন বৈশিষ্ট্য অ্যানিমেট করছেন, আপনি অ্যানিমেট করতে চান এমন প্রতিটি সম্পত্তির পরে আপনাকে allow-discrete
অন্তর্ভুক্ত করতে হবে। উদাহরণ স্বরূপ:
.card {
transition: opacity 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}
.card.fade-out {
opacity: 0;
display: none;
}
এন্ট্রি অ্যানিমেশনের জন্য @starting-style
নিয়ম
এখন পর্যন্ত, এই নিবন্ধটি প্রস্থান অ্যানিমেশনগুলিকে কভার করেছে, এন্ট্রি অ্যানিমেশন তৈরি করতে আপনাকে @starting-style
নিয়মটি ব্যবহার করতে হবে।
পৃষ্ঠায় উপাদান খোলার আগে ব্রাউজার দেখতে পারে এমন একটি স্টাইল প্রয়োগ করতে @starting-style
ব্যবহার করুন। এটি "আগে-খোলা" অবস্থা (যেখান থেকে আপনি অ্যানিমেট করছেন)।
/* 0. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. IS-OPEN STATE */
/* The state at which the element is open + transition logic */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
/* 2. EXITING STATE */
/* While it is deleting, before DOM removal in JS, apply this
transformation for height, opacity, and a transform which
skews the element and moves it to the left before setting
it to display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}
এখন আপনার কাছে এই TODO তালিকা আইটেমগুলির জন্য প্রবেশ এবং প্রস্থান উভয় অবস্থাই রয়েছে:
উপরের স্তরে এবং থেকে উপাদানগুলিকে অ্যানিমেটিং করা৷
উপরের স্তরে এবং থেকে উপাদানগুলিকে অ্যানিমেট করতে, ব্রাউজারকে কোথা থেকে অ্যানিমেট করতে হবে তা জানাতে "ওপেন" স্টেটে @starting-style
নির্দিষ্ট করুন৷ একটি ডায়ালগের জন্য, ওপেন স্টেটকে [open]
অ্যাট্রিবিউট দিয়ে সংজ্ঞায়িত করা হয়। একটি পপওভারের জন্য, :popover-open
pseudo class ব্যবহার করুন।
একটি ডায়ালগের একটি সাধারণ উদাহরণ এইরকম দেখতে পারে:
/* 0. BEFORE-OPEN STATE */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* 1. IS-OPEN STATE */
dialog[open] {
translate: 0 0;
}
/* 2. EXIT STATE */
dialog {
transition: translate 0.7s ease-out, overlay 0.7s ease-out allow-discrete, display 0.7s ease-out allow-discrete;
translate: 0 100vh;
}
পরবর্তী উদাহরণে, প্রবেশ এবং প্রস্থান প্রভাব ভিন্ন। ভিউপোর্টের নিচ থেকে অ্যানিমেট করে প্রবেশ করুন, ভিউপোর্টের শীর্ষে প্রভাব থেকে প্রস্থান করুন। এটি আরও ভিজ্যুয়াল এনক্যাপসুলেশনের জন্য নেস্টেড সিএসএস দিয়ে লেখা হয়।
একটি পপওভার অ্যানিমেট করার সময়, পূর্বে ব্যবহৃত open
অ্যাট্রিবিউটের পরিবর্তে :popover-open
pseudo class ব্যবহার করুন।
.settings-popover {
&:popover-open {
/* 0. BEFORE-OPEN STATE */
/* Initial state for what we're animating *in* from,
in this case: goes from lower (y + 20px) to center */
@starting-style {
transform: translateY(20px);
opacity: 0;
}
/* 1. IS-OPEN STATE */
/* state when popover is open, BOTH:
what we're transitioning *in* to
and transitioning *out* from */
transform: translateY(0);
opacity: 1;
}
/* 2. EXIT STATE */
/* Initial state for what we're animating *out* to ,
in this case: goes from center to (y - 50px) higher */
transform: translateY(-50px);
opacity: 0;
/* Enumerate transitioning properties,
including display and allow-discrete mode */
transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}
overlay
সম্পত্তি
অবশেষে, উপরের স্তর থেকে একটি popover
বা dialog
বিবর্ণ করতে, আপনার ট্রানজিশনের তালিকায় overlay
প্রপার্টি যোগ করুন। popover
এবং dialog
এস্কেপ অ্যান্সটর ক্লিপ এবং ট্রান্সফর্ম করে এবং কন্টেন্টটিকে উপরের লেয়ারে রাখে। আপনি যদি overlay
রূপান্তর না করেন তবে আপনার উপাদানটি অবিলম্বে ক্লিপড, রূপান্তরিত এবং covered েকে রাখা হবে এবং আপনি রূপান্তরটি ঘটতে দেখবেন না।
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
পরিবর্তে, বাকী বৈশিষ্ট্যগুলির সাথে overlay
overlay
করতে রূপান্তর বা অ্যানিমেশনে ওভারলে অন্তর্ভুক্ত করুন এবং অ্যানিমেট করার সময় এটি শীর্ষ স্তরে থেকে যায় তা নিশ্চিত করে। এটি অনেক মসৃণ দেখাবে।
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
��তিরিক্তভাবে, যখন আপনার শীর্ষ স্তরটিতে একাধিক উপাদান খোলা থাকে, তখন ওভারলে আপনাকে উপরের স্তরটির মধ্যে এবং বাইরে মসৃণ রূপান্তর নিয়ন্ত্রণ করতে সহায়তা করে। আপনি এই সাধারণ উদাহরণে পার্থক্য দেখতে পারেন। আপনি যদি এটি স্থানান্তরিত করার সময় দ্বিতীয় পপওভারে overlay
প্রয়োগ না করে থাকেন তবে এটি প্রথমে শীর্ষ স্তর থেকে বেরিয়ে আসবে, স্থানান্তর শুরু করার আগে, অন্যান্য পপওভারের পিছনে ঝাঁপিয়ে পড়বে। এটি খুব মসৃণ প্রভাব নয়।
ভিউ ট্রানজিশনের উপর একটি নোট
আপনি যদি DOM পরিবর্তন করেন, যেমন DOM থেকে উপাদান যোগ করা এবং অপসারণ করা, মসৃণ অ্যানিমেশনের জন্য আরেকটি দুর্দান্ত সমাধান হল ভিউ ট্রানজিশন । ভিউ ট্রানজিশনগুলি ব্যবহার করে নির্মিত উপরের দুটি উদাহরণ এখানে।
এই প্রথম ডেমোতে, @starting-style
এবং অন্যান্য সিএসএস রূপান্তর সেট আপ করার পরিবর্তে, ভিউ ট্রানজিশন ট্রানজিশন পরিচালনা করবে। ভিউ ট্রানজিশনটি এভাবে সেট আপ করা হয়েছে:
প্রথমে, CSS-এ, প্রতিটি কার্ডকে একটি পৃথক view-transition-name
দিন।
.card-1 {
view-transition-name: card-1;
}
.card-2 {
view-transition-name: card-2;
}
/* etc. */
তারপরে, জাভাস্ক্রিপ্টে, একটি ভিউ ট্রানজিশনে ডিওএম মিউটেশনটি (এই ক্ষেত্রে, কার্ডটি সরিয়ে) মোড়ানো।
deleteBtn.addEventListener('click', () => {
// Check for browser support
if (document.startViewTransition) {
document.startViewTransition(() => {
// DOM mutation
card.remove();
});
}
// Alternative if no browser support
else {
card.remove();
}
})
এখন, ব্রাউজার প্রতিটি কার্ডের ফেইড আউট এবং রূপকে তার নতুন অবস্থানে পরিচালনা করতে পারে।
এটি কোথায় কার্যকর হতে পারে তার আরেকটি উদাহরণ হ'ল অ্যাড/অপসারণ তালিকার আইটেমগুলি ডেমো সহ। এই ক্ষেত্রে, আপনাকে তৈর�� করা প্রতিটি কার্ডের জন্য একটি অনন্য view-transition-name
যুক্ত করতে হবে।
উপসংহার
এই নতুন প্ল্যাটফর্ম বৈশিষ্ট্যগুলি আমাদের ওয়েব প্ল্যাটফর্মে মসৃণ প্রবেশ এবং প্রস্থান অ্যানিমেশনগুলির এক ধাপ কাছাকাছি নিয়ে আসে। আরও জানতে, এই লিঙ্কগুলি দেখুন: