Transitions (အကူးအပြောင်း)

ရုတ်တရက် မဟုတ်ဘူး

Website တစ်ခုမှာ Button လေးတစ်ခုပေါ်ကို Mouse သွားတင်လိုက်တဲ့အခါ အရောင်က ချက်ချင်းကြီး ရုတ်တရက် ပြောင်းသွားတာထက်စာရင်၊ ဖြည်းဖြည်းချင်း ချောချောမွေ့မွေ့လေး ပြောင်းသွားတာက User တွေအတွက် ပိုပြီး ကြည့်ကောင်းပါတယ်။ အဲဒီလို ဖြည်းဖြည်းချင်း ပြောင်းလဲသွားစေတဲ့ အရာကို Transition လို့ ခေါ်ပါတယ် ခင်ဗျာ။

ဘယ်လို သုံးမလဲ?

Transition effect ကို သုံးချင်တယ်ဆိုရင်၊ အဲဒီပြောင်းလဲချင်တဲ့ Element မှာ transition Property ကို ထည့်ပေးရပါမယ်။ ဒီနေရာမှာ အရေးကြီးတာက transition ကို Hover လုပ်တဲ့ Class (Mouse တင်တဲ့အချိန်) မှာ သွားမထည့်ဘဲနဲ့၊ မူလ Class ထဲမှာပဲ မဖြစ်မနေ ထည့်ပေးရပါမယ်။

.button {
  background-color: blue;
  color: white;
  /* Property, Duration, Timing-Function */
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue; /* Mouse တင်ရင် ဒီအရောင်ကို 0.3 စက္ကန့်အတွင်း ပြောင်းသွားမယ် */
}

Transition Properties

1. Property: ဘယ်အရာကို ပြောင်းလဲမှာလဲ? (ဥပမာ - အကုန်ပြောင်းမှာဆိုရင် all၊ အရောင်ပဲဆို background-color၊ အကျယ်ပဲဆို width စသဖြင့်)
2. Duration: ပြောင်းလဲသွားဖို့ အချိန် ဘယ်လောက် ယူမှာလဲ? (ဥပမာ - 0.3s, 1s, 500ms)
3. Timing Function: ဘယ်လို အမြန်နှုန်းနဲ့ အကူးအပြောင်း လုပ်မှာလဲ?
   • linear: အစကနေ အဆုံးအထိ အမြန်နှုန်း တစ်သမတ်တည်း သွားမယ်။
   • ease: အစမှာ နှေးမယ်၊ အလယ်မှာ မြန်မယ်၊ အဆုံးမှာ ပြန်နှေးသွားမယ်။ (ဒါက အမြင်မှာ အသဘာဝကျဆုံး ဖြစ်လို့ Default အနေနဲ့ သုံးပါတယ်)
   • ease-in: အစမှာ နှေးနှေးလေး စမယ်။
   • ease-out: အဆုံးသတ်တဲ့အခါ နှေးနှေးလေး အဆုံးသတ်မယ်။

.card {
  transition: all 0.5s ease-in-out;
}