Animationiteration Event
ဥပမာ
CSS ကာတွန်းကို ထပ်ခါတလဲလဲလုပ်သောအခါ <div> ဒြပ်စင်တစ်ခုဖြင့် တစ်ခုခုလုပ်ပါ-
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
CSS ကာတွန်းကို ထပ်ခါတလဲလဲ ပြုလုပ်သောအခါတွင် လှုပ်ရှားသက်ဝင်မှုဆိုင်ရာ ဖြစ်ရပ် ဖြစ်ပေါ်သည်။
CSS animation-iteration-count property ကို "1" ဟု သတ်မှတ်ပါက ကာတွန်းကို တစ်ကြိမ်သာ ဖွင့်မည်ဆိုပါက၊ လှုပ်ရှားသက်ဝင်မှု ဖြစ်စဉ်ကို ဖြစ်ပေါ်မည်မဟုတ်ပါ။ ဤဖြစ်ရပ်ကို စတင်ရန်အတွက် ကာတွန်းသည် တစ်ကြိမ်ထက်ပို၍ လုပ်ဆောင်ရန် လိုအပ်သည်။
CSS အန်နီမေးရှင်းများအကြောင်း နောက်ထပ်အချက်အလက်များအတွက်၊ CSS3 Animations ဆိုင်ရာ ကျွန်ုပ်တို့၏ သင်ခန်းစာကို ကြည့်ပါ ။
CSS ကာတွန်းတစ်ခု ဖွင့်သောအခါတွင် ဖြစ်ပွားနိုင်သည့် အဖြစ်အပျက် သုံးခုရှိသည်။
- animationstart - CSS animation စတင်သောအခါတွင် ဖြစ်ပေါ်သည်။
- animationiteration - CSS ကာတွန်းကို ထပ်ခါတလဲလဲ ပြုလုပ်သောအခါ ဖြစ်ပေါ်သည်။
- animationend - CSS animation ပြီးသွားသောအခါတွင် ဖြစ်ပေါ်သည်။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် အဖြစ်အပျက်ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
"webkit" သို့မဟုတ် "moz" ဖြင့် လိုက်သော နံပါတ်များသည် ရှေ့ဆက်တစ်ခုနှင့် လုပ်ဆောင်သည့် ပထမဆုံးဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
Event | |||||
---|---|---|---|---|---|
animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
မှတ်ချက်- Chrome၊ Safari နှင့် Opera အတွက်၊ webkitAnimationIteration ရှေ့ဆက်ကို အသုံးပြုပါ။
အထားအသို
object.addEventListener("webkitAnimationIteration", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationiteration", myScript); // Standard syntax
မှတ်ချက်- addEventListener () နည်းလမ်းကို Internet Explorer 8 နှင့် အစောပိုင်းဗားရှင်းများတွင် ပံ့ပိုးမထားပါ။
နည်းပညာဆိုင်ရာအသေးစိတ်
ပူဖောင်း: | ဟုတ်ကဲ့ |
---|---|
ပယ်ဖျက်နိုင်သည်- | မရှိ |
ပွဲအမျိုးအစား- | အန်နီမေးရှင်းဖြစ်ရပ် |
DOM ဗားရှင်း- | အဆင့် 3 ပွဲများ |
ဆက်စပ်စာမျက်နှာများ
CSS ကျူတိုရီရယ်- CSS3 အန်နီမေးရှင်း
CSS ရည်ညွှန်းချက်- CSS3 ကာတွန်းပစ္စည်း ပိုင်ဆိုင်မှု
CSS ရည်ညွှန်းချက်- CSS3 animation-iteration-count Property
HTML DOM ရည်ညွှန်း- စတိုင်ကာတွန်း ပိုင်ဆိုင်မှု