Aurelia - Animations أوريليا - صور متحركة

 Aurelia - Animations أوريليا - صور متحركة

في هذا الفصل ، ستتعلم كيفية استخدام الرسوم المتحركة لـ CSS في إطار عمل Aurelia.

الخطوة 1 - عرض

ستحتوي طريقة العرض الخاصة بنا على عنصر واحد سيتم تحريكه وزر لتشغيل وظيفة animateElement () .

app.html

<template>
   <div class = "myElement"></div>
   <button click.delegate = "animateElement()">ANIMATE</button>
</template>

الخطوة 2 - عرض النموذج

داخل ملف JavaScript الخاص بنا ، سنستورد المكون الإضافي CssAnimator ونحقنه كتبعية. و animateElement وظيفة استدعاء الرسوم المتحركة لبدء الرسوم المتحركة. سيتم إنشاء الرسوم المتحركة في الخطوة التالية.

import {CssAnimator} from 'aurelia-animator-css';
import {inject} from 'aurelia-framework';

@inject(CssAnimator, Element)
export class App {
   constructor(animator, element) {
      this.animator = animator;
      this.element = element;
   }

   animateElement() {
      var myElement = this.element.querySelector('.myElement');
      this.animator.animate(myElement, 'myAnimation');
   }
}

الخطوة 3 - الأسلوب

سنكتب CSS داخل ملف styles / styles.css . .myAnimation-add هي نقطة البداية للرسوم المتحركة بينما يتم استدعاء .myAnimation-remove عند اكتمال الرسم المتحرك.

style.css

.myElement {
   width:100px;
   height: 100px;
   border:1px solid blue;
}

.myAnimation-add {
   -webkit-animation: changeBack 3s;
   animation: changeBack 3s;
}

.myAnimation-remove {
   -webkit-animation: fadeIn 3s;
   animation: fadeIn 3s;
}

@-webkit-keyframes changeBack {
   0% { background-color: #e6efff; }
   25% { background-color: #4d91ff; }
   50% { background-color: #0058e6; }
   75% { background-color: #003180; }
   100% { background-color: #000a1a; }
}

@keyframes changeBack {
   0% { background-color: #000a1a; }
   25% { background-color: #003180; }
   50% { background-color: #0058e6; }
   75% { background-color: #4d91ff; }
   100% { background-color: #e6efff; }
}

بمجرد النقر فوق الزر ANIMATE ، سيتم تغيير لون الخلفية من اللون الأزرق الفاتح إلى الظل الداكن. عند اكتمال هذه الرسوم المتحركة بعد ثلاث ثوانٍ ، سيتلاشى العنصر إلى حالة البداية.