animationiteration واقعیت

DOM 事件 AnimationEvent

تعلیم اور استعمال

animationiteration ایونٹ انیمیشن کی تکرار کے دوران آپ رہی گا

اگر CSS animation-iteration-count کا اندازایسا سیٹ کیا جائے، جس میں '1'، انیمیشن صرف ایک بار چلے گا، اس کی وجہ سے animationiteration ایونٹ آپ رہی گا، جب تک انیمیشن کئی بار چلتی رہتی ہوئی، اس ایونٹ کو تیار کیا جائے گا

اگر آپ کس موچ آپنیا CSS انیمیشن کی جانی چاہندا، اپنے لیئکریز میں سیکھیجئے CSS3 انیمیشن درس.

ਜਦੋਂ ਕ੍ਰਿਸਟਸ ਐਨੀਮੇਸ਼ਨ ਚਲਾਉਣ ਵਾਲੀ ਹੈ, ਤਾਂ ਤਿੰਨ ਈਵੈਂਟ ਹੋ ਸਕਦੇ ਹਨ:

  • animationstart - ਜਦੋਂ ਕ੍ਰਿਸਟਸ ਐਨੀਮੇਸ਼ਨ ਸ਼ੁਰੂ ਹੋਵੇਗੀ
  • animationiteration - ਜਦੋਂ ਕ੍ਰਿਸਟਸ ਐਨੀਮੇਸ਼ਨ ਦੁਹਰਾਉਣ ਵਾਲੀ ਹੈ
  • animationend - ਜਦੋਂ ਕ੍ਰਿਸਟਸ ਐਨੀਮੇਸ਼ਨ ਪੂਰੀ ਹੋਵੇਗੀ

ਉਦਾਹਰਣ

ਜਦੋਂ ਕ੍ਰਿਸਟਸ ਐਨੀਮੇਸ਼ਨ ਦੁਹਰਾਉਣ ਵਾਲੀ ਹੈ, <div> ਇਲੈਕਟ੍ਰੌਨ ਨਾਲ ਕੁਝ ਕਰੋ:

var x = document.getElementById("myDIV");
// ਚਰਮੋਨ, ਸੈਫਾਰੀ ਅਤੇ ਓਪਰਾ ਲਈ ਕੋਡ
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// ਮਿਆਰੀ ਗਰੇਫਿਕ
x.addEventListener("animationiteration", myRepeatFunction);

ਸਵੈ ਲਾਗੂ ਕਰੋ

ਗਰੇਫਿਕ

object.addEventListener("webkitAnimationIteration", myScript);  // ਚਰਮੋਨ, ਸੈਫਾਰੀ ਅਤੇ ਓਪਰਾ ਲਈ ਕੋਡ
object.addEventListener("animationiteration", myScript);        // ਮਿਆਰੀ ਗਰੇਫਿਕ

ਟਿੱਪਣੀਆਂ：ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਜਾਂ ਪਹਿਲੇ ਦੀਆਂ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਸਮਰਥਨ ਨਹੀਂ ਹੈ addEventListener() ਮੱਥਦਾ.

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਬੁਲਾਰਾ ਸਮਰਥਨ
ਰੱਦ ਕਰਨ ਯੋਗ ਸਮਰਥਨ ਨਹੀਂ
ਈਵੈਂਟ ਪ੍ਰਕਾਰ: AnimationEvent
DOM ਸੰਸਕਰਣ: ਲੈਵਲ 3 ਈਵੈਂਟ

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਨੰਬਰਾਂ ਵਿੱਚ ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਦਾ ਪਹਿਲਾ ਬਰਾਉਜ਼ਰ ਸੰਸਕਰਣ ਦਿਸਾਇਆ ਗਿਆ ਹੈ。

ਨੰਬਰ ਦੇ ਬਾਅਦ "webkit" ਜਾਂ "moz" ਨਾਲ ਸੰਕੇਤ ਦਿੱਤਾ ਗਿਆ ਹੈ ਕਿ ਪਹਿਲੀ ਸੰਸਕਰਣ ਵਿੱਚ ਪ੍ਰਤੀਕ ਵਰਤਿਆ ਗਿਆ ਹੈ。

ਈਵੈਂਟ ਚਰਮੋਨ IE ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
animationiteration 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

ਟਿੱਪਣੀਆਂ：ਚਰਮੋਨ, ਸੈਫਾਰੀ ਅਤੇ ਓਪਰਾ ਲਈ webkitAnimationEnd ਵਰਤੋਂ ਕਰੋ。

ਸਬੰਧਤ ਪੰਨੇ

CSS ਟੂਰੀਮੈਂਟ：CSS3 ਐਨੀਮੇਸ਼ਨ

CSS 参考手册：CSS3 animation 属性

CSS 参考手册：CSS3 animation-iteration-count 属性

HTML DOM 参考手册：Style animation کا انداز

DOM 事件 AnimationEvent