Aurelia.js: Làm cách nào để tạo hiệu ứng cho một phần tử khi giá trị bị ràng buộc thay đổi?

Question

Tôi đang sử dụng Aurelia.js cho giao diện người dùng của mình. Giả sử tôi có đánh dấu chế độ xem sau:

<tr repeat.for="item in items"> 
    <td>${item.name}</td> 
    <td>${item.value}</td> 
</tr> 

Được gắn với một "mặt hàng" mô hình. Khi một trong các giá trị trong mô hình thay đổi, tôi muốn tạo hiệu ứng động cho ô nơi giá trị thay đổi được hiển thị. Làm thế nào tôi có thể thực hiện điều này?

Answer 1

Điều này có thể được thực hiện với Aurelia custom attributes tính năng.

Tạo một file javascript mới để mô tả các thuộc tính (tôi gọi là thuộc tính "animateonchange"):

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

@customAttribute('animateonchange') 
@inject(Element, CssAnimator) 
export class AnimateOnChangeCustomAttribute { 
    constructor(element, animator) { 
     this.element = element; 
     this.animator = animator; 
     this.initialValueSet = false; 
    } 

    valueChanged(newValue){ 
     if (this.initialValueSet) { 
      this.animator.addClass(this.element, 'background-animation').then(() => { 
       this.animator.removeClass(this.element, 'background-animation'); 
      }); 
     } 
     this.initialValueSet = true; 
    } 
} 

Nó nhận các yếu tố và CSS làm phim hoạt hình trong constructor. Khi giá trị thay đổi, nó sẽ sinh động phần tử với tên lớp CSS được xác định trước. Thay đổi đầu tiên bị bỏ qua (không cần phải hoạt ảnh khi tải ban đầu). Dưới đây là làm thế nào để sử dụng yếu tố tùy chỉnh này:

<template> 
    <require from="./animateonchange"></require> 
    <div animateonchange.bind="someProperty">${someProperty}</div> 
</template> 

Xem ví dụ hoàn chỉnh in my blog hoặc on plunkr

Answer 2

Các tác giả của điên Aurelia-CSS-Animator qua đây :)

Để làm được những gì bạn muốn, bạn chỉ cần có được giữ của DOM-Yếu tố và sau đó sử dụng phương pháp Animate Aurelia của. Vì tôi không biết làm thế nào bạn sẽ chỉnh sửa một mục, tôi đã chỉ sử dụng một thời gian chờ bên trong máy ảo để mô phỏng nó.

attached() { 
    // demo the item change 
    setTimeout(() => { 
    let editedItemIdx = 1; 

    this.items[editedItemIdx].value = 'Value UPDATED'; 
    console.log(this.element); 
    var elem = this.element.querySelectorAll('tbody tr')[editedItemIdx]; 

    this.animator.addClass(elem, 'background-animation').then(() => { 
     this.animator.removeClass(elem, 'background-animation') 
    }); 
    }, 3000); 
} 

Tôi đã tạo một tài liệu nhỏ để chứng minh cách thức hoạt động. Lưu ý đây là một phiên bản cũ, không chứa phiên bản trình diễn hoạt hình mới nhất, vì vậy thay vì tạo hiệu ứng động, tôi đang sử dụng addClass/removeClass cùng nhau.

http://plnkr.co/edit/7pI50hb3cegQJTXp2r4m

Ngoài ra hãy xem tại bài viết trên blog chính thức, với nhiều gợi ý http://blog.durandal.io/2015/07/17/animating-apps-with-aurelia-part-1/

Hope this helps