في عصر CSS3 ، من الممكن تكوين CSS3 ؛
يمكن لـ JS التقليدية تحديد ما إذا كانت الرسوم المتحركة تنتهي من خلال وظائف رد الاتصال ؛ حتى إذا تم استخدام تقنية CSS لتوليد تأثيرات الرسوم المتحركة ، فلا يزال بإمكان JavaScript التقاط حدث نهاية الرسوم المتحركة أو التحول ؛
أحداث الحدث TransitionEnd و AnimationEnd أحداث المستعرض القياسي ، ولكن في متصفح WebKit ، لا تزال بحاجة إلى استخدام بادئة WebKit ، لذلك يتعين علينا اكتشاف الأحداث بشكل منفصل وفقًا لمتصفحات مختلفة
نسخة الكود كما يلي:
Var Transitions = {
"الانتقال": "الانتقال" ،
'otransition': 'otransitionend' ،
"Moztransition": "TransitionEnd" ،
'WebKittransition': 'WebKitTransitionEnd'
}
رمز المصدر متصل أدناه:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> يحدد Suface JS ما إذا كانت الرسوم المتحركة CSS تنتهي </title>
</head>
<body>
<p> بمجرد الانتهاء من الرسوم المتحركة أو التحول ، سيتم إطلاق وظيفة رد الاتصال. لم يعد هناك حاجة إلى دعم مكتبة فئة كبيرة. <br> </p>
<type type = "text/css">
.عينة {
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
الحدود: 1 بكسل خضراء صلبة.
الخلفية: Lightgreen ؛
العتامة: 1 ؛
القاع الهامش: 20 بكسل ؛
الممتلك الانتقالي: التعتيم ؛
/*مدة الانتقال: .5S ؛*/
مدة الانتقال: 3s ؛
}
.sample.hide {
العتامة: 0 ؛
}
</style>
<Div> CSS3 الرسوم المتحركة مخفية بشكل مفرط (المدة الانتقالية: 3S ؛) </div>
<p> <button onClick = "this.style.display = 'none' ؛ startFade () ؛"> تتلاشى ببطء ، الحدث نهاية الكشف </putric> </p>
<script>
(وظيفة() {
var e = document.getElementSbyClassName ('sample') [0] ؛
وظيفة thransitionEvent () {
var t ؛
var el = document.createElement ('fakeElement') ؛
Var Transitions = {
"الانتقال": "الانتقال" ،
'otransition': 'otransitionend' ،
"Moztransition": "TransitionEnd" ،
'WebKittransition': 'WebKitTransitionEnd'
}
لـ (t في التحولات) {
if (el.style [t]! == undefined) {
عودة التحولات [t] ؛
}
}
}
var transitionEvent = thranstionEvent () ؛
TransitionEvent && E.AdDeventListener (TransitionEvent ، Function () {
التنبيه ('تنتهي حركة CSS3! أنا وظيفة رد اتصال ، لا يتم استخدام مكتبة فئة الطرف الثالث! ") ؛
}) ؛
startFade = function () {
e.ClassName+= 'Hide' ؛
}
}) () ؛ <br> </script>
</body>
</html>
ما سبق هو الطريقة الموضحة في هذه المقالة حول JavaScript للحكم على نهاية الرسوم المتحركة CSS3. أتمنى أن يحبها الجميع