تقدم هذه المقالة نموذج التعليمات البرمجية لتأثير الستائر Html5 وتشاركه مع الجميع، والتفاصيل هي كما يلي:
مقدمة طريقة التنفيذ:
1. يتم تراكب تخطيط الستائر المعتمة على تخطيط المحتوى مع تحديد الموضع (الموضع: مطلق)، ويتم ضبط الخلفية على شفافة (لون الخلفية: شفاف)
2. تحدد الإطارات الرئيسية التلاشي والتلاشي (تغيير الشفافية) والرسوم المتحركة لتأثير النافذة العمياء.
3. ابدأ الرسم المتحرك عن طريق تعيين سمة className لـ DOM، animator.className = 'baiyeWindow'؛ استمع إلى حدث اكتمال الرسوم المتحركة 'animationend'، وقم بمسح سمة className.
4. في حالة تبديل تخطيط المحتوى، قم باستدعاء طريقة الرسوم المتحركة لبدء التشغيل. يحتاج كلا التخطيطين إلى ربط حدث التبديل ng-click=switchLayout().
5. مخطط تسلسل تنفيذ الرسوم المتحركة:
كود أتش تي أم أل:
<!--تخطيط لعرض تأثير الستائر--تبديل المحتوى--><div id=fadeInOut class=content ng-click=switchLayout()>...</div><!--تخطيط اللوفر--> < ul id=baiyeWindow ng-click=switchLayout()> <li><div class=ye></div></li> <li><div class=ye></div></li> <li>< div class=ye></div></li> <li><div class=ye></div></li> </ul>
كود نمط CSS:
// الحديث داخل وخارج Effect.fade-animation{ @-webkit-keyframes FadeInOut { 0% { opacity: 1 } 50% { opacity: 0 } 100% { opacity: 1 } } @keyframes FadeInOut { 0% { العتامة: 1؛ } 50% { العتامة: 0 } 100% { العتامة: 1; } } الرسوم المتحركة: FadeInOut 1seasy-in; -webkit-animation: FadeInOut 1seasy-in; : 1.2rem؛ الارتفاع: 0.42rem؛ ارتفاع الخط: 40 بكسل؛ شفاف؛ .ye{ -webkit-animation: SlideOut 1s easy-in-out؛ الرسوم المتحركة: SlideOut 1s easy-in-out width: 100%; : أعلى: 50% } } @-webkit-keyframes SlideOut { 0% { padding-bottom: 0; الحشو السفلي: 40 بكسل;رمز شبيبة:
// تبديل التخطيط $scope.switchLayout = function(){ ... $scope.startBaiYeWindow(); // بعد بدء الرسوم المتحركة لمدة 0.5 ثانية، تحكم في التخطيط لإظهار/إخفاء $timeout(function () { if ($ scope.show) { $scope.show = false } else { .... } }, 500);// بدء الرسوم المتحركة $scope.startBaiYeWindow = function () { var animator = document.getElementById('baiyeWindow'); var animatorFadeInOut = document.getElementById('fadeInOut'); animator.addEventListener('animationend', function () { animator.className = ''; animatorFadeInOut.className = 'content'; }) $timeout(function () { animator.className = 'baiyeWindow'; animatorFadeInOut.className = 'content Fade-animation' }, 0 });ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.