View Transitions (Cross-Document)
အသုံးပြုပုံ
Section titled “အသုံးပြုပုံ”Multi-page Application (စာမျက်နှာများစွာ ပါဝင်သော Website) တွေမှာ CSS တစ်ကြောင်းတည်း ထည့်ရေးလိုက်တာနဲ့တင် စတင် အသက်ဝင်သွားပါပြီ။
@view-transition { navigation: auto;}ဒါပါပဲ! Browser က Page အဟောင်းနဲ့ အသစ် ကြားမှာ အလိုအလျောက် Cross-fade (မှေးမှိန်ပြီး ပေါ်လာသော) Animation မျိုးကို လုပ်ဆောင်ပေးသွားပါလိမ့်မယ်။
Custom Animation (မိမိစိတ်ကြိုက် လှုပ်ရှားမှုများ ဖန်တီးခြင်း)
Section titled “Custom Animation (မိမိစိတ်ကြိုက် လှုပ်ရှားမှုများ ဖန်တီးခြင်း)”Element တစ်ခုချင်းစီကို နာမည် (Name) ပေးပြီးတော့လည်း သီးသန့် Animate လုပ်လို့ ရပါတယ်။ ဥပမာ - Product List စာမျက်နှာမှာရှိတဲ့ ပုံကို နှိပ်လိုက်ရင်၊ Detail စာမျက်နှာကို ရောက်သွားတဲ့အခါ အဲ့ဒီပုံက ဖြည်းဖြည်းချင်း ကြီးလာပြီး နေရာရွှေ့သွားတာမျိုး (Shared Element Transition) ကို လုပ်နိုင်ပါတယ်။
Page 1 (Product List):
.product-img { view-transition-name: product-123; /* နာမည်တစ်ခု ပေးထားပါမယ် */}Page 2 (Product Detail):
.hero-img { view-transition-name: product-123; /* ဟိုဘက် Page က နာမည်နဲ့ တူနေရပါမယ် */}ဒီလို ရေးထားလိုက်ရင် Browser က အဲ့ဒီ နှစ်ခုဟာ တစ်ခုတည်းပါလား ဆိုတာကို သိရှိပြီး၊ ပုံသဏ္ဌာန် ပြောင်းလဲသွားတဲ့ အတိုင်း (Morph animation) အလိုအလျောက် ချိတ်ဆက် ပြသပေးသွားမှာ ဖြစ်ပါတယ်။