javascript - Aurelia.js : How do I animate an element when bound value changes?

Question

我正在使用 Aurelia.js对于我的用户界面。假设我有以下 View 标记:

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

绑定(bind)到模型“项目”。当模型中的一个值发生变化时，我想为显示更改值的单元格设置动画。我怎样才能做到这一点？

Answer 1

这可以用 Aurelia 来完成 custom attributes特征。

创建一个新的 javascript 文件来描述属性(我将属性命名为“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;
    }
}

它在构造函数中接收元素和 CSS 动画器。当值发生变化时，它会使用预定义的 CSS 类名称为元素设置动画。第一个变化被忽略(不需要在初始加载时设置动画)。以下是如何使用此自定义元素:

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

查看完整示例 in my blog或 on plunkr