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