Aurelia.js: Come posso animare un elemento quando il valore associato cambia?

Question

Sto usando Aurelia.js per la mia interfaccia utente. Diciamo che ho il seguente markup vista:

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

Che è legato a un modello "articoli". Quando uno dei valori nel modello cambia, voglio animare la cella in cui viene visualizzato il valore modificato. Come posso realizzare questo?

Answer 1

Questo può essere fatto con Aurelia custom attributes funzione.

Creare un nuovo file javascript per descrivere l'attributo (ho chiamato l'attributo "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; 
    } 
} 

Riceve l'elemento e CSS animatore nel costruttore. Quando il valore cambia, anima l'elemento con un nome di classe CSS predefinito. La prima modifica viene ignorata (non è necessario animare al caricamento iniziale). Ecco come utilizzare questo elemento personalizzato:

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

Vedi l'esempio completo in my blog o on plunkr

Answer 2

Il creatore del folle Aurelia-CSS-Animator qui :)

Al fine di fare ciò che si desidera è semplicemente bisogno di entrare in possesso del DOM-Element e quindi utilizzare il metodo animato di Aurelia. Dato che non so come modificherete un oggetto, ho appena usato un timeout all'interno della VM per simularlo.

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); 
} 

Ho creato un piccolo plunkr per dimostrare come potrebbe funzionare. Nota che questa è una vecchia versione, non contenente l'ultima istanza di animatore, quindi invece di animare sto usando addClass/removeClass insieme.

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

anche dare un'occhiata al posto blog ufficiale, con ulteriori suggerimenti http://blog.durandal.io/2015/07/17/animating-apps-with-aurelia-part-1/

Spero che questo aiuti