Aurelia - Hoạt hình
Trong chương này, bạn sẽ học cách sử dụng hoạt ảnh CSS trong khung công tác Aurelia.
Bước 1 - Xem
Chế độ xem của chúng tôi sẽ có một phần tử sẽ được làm động và một nút để kích hoạt animateElement() chức năng.
app.html
<template>
<div class = "myElement"></div>
<button click.delegate = "animateElement()">ANIMATE</button>
</template>
Bước 2 - Chế độ xem mô hình
Bên trong tệp JavaScript của chúng tôi, chúng tôi sẽ nhập CssAnimatorplugin và đưa nó vào làm phụ thuộc. CácanimateElementhàm sẽ gọi trình tạo hoạt ảnh để bắt đầu hoạt ảnh. Hoạt ảnh sẽ được tạo trong bước tiếp theo.
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');
}
}
Bước 3 - Phong cách
Chúng tôi sẽ viết CSS bên trong styles/styles.css tập tin. .myAnimation-add là điểm bắt đầu của hoạt ảnh trong khi .myAnimation-remove được gọi khi hoạt ảnh hoàn tất.
styles.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; }
}
Một khi ANIMATEđược nhấp vào, màu nền sẽ được thay đổi từ màu xanh lam nhạt sang bóng tối. Khi hoạt ảnh này hoàn tất sau ba giây, phần tử sẽ mờ dần về trạng thái bắt đầu.