Aurelia.js：当绑定值更改时，如何为元素设置动画？ [英] Aurelia.js: How do I animate an element when bound value changes?

问题描述

我正在使用 Aurelia.js 作为我的用户界面。假设我有以下视图标记：

I am using Aurelia.js for my UI. Let's say I have the following view markup:

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

哪个绑定到模型items。当模型中的某个值发生更改时，我想为显示更改值的单元格设置动画。我怎样才能做到这一点？

Which is bound to a model "items". When one of the values in the model changes, I want to animate the cell where the changed value is displayed. How can I accomplish this?

推荐答案

这可以通过Aurelia完成自定义属性功能。

This can be done with Aurelia custom attributes feature.

创建一个新的javascript文件来描述属性（我称之为animateonchange属性）：

Create a new javascript file to describe the attribute (I called the attribute "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类名称为元素设置动画。忽略第一个更改（无需在初始加载时设置动画）。以下是如何使用此自定义元素：

It receives the element and CSS animator in constructor. When the value changes, it animates the element with a predefined CSS class name. The first change is ignored (no need to animate on initial load). Here is how to use this custom element:

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

查看完整示例在我的博客中或在plunkr

这篇关于Aurelia.js：当绑定值更改时，如何为元素设置动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！