Geek Answers Handbook

Aurelia.js: How do I animate an element when the binding value changes?

I am using Aurelia.js for my user interface. Let's say I have the following markup of the form:

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

What is connected with model "elements". When one of the values ​​in the model changes, I want to animate the cell where the changed value is displayed. How can i do this?

+6
source share
2 answers

This can be done using the Aurelia custom attributes function.

Create a new javascript file to describe the attribute (I named 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; } }

It gets the element and CSS animator in the constructor. When the value changes, it animates the element with the predefined CSS class name. The first change is ignored (no need to animate at boot). Here's how to use this custom item:

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

See the full example on my blog or on plunkr

+7
source

The creator of the crazy Aurelia-CSS-Animator is here :)

To do what you need, you just need to get the DOM element and then use the Aurelia animate method. Since I do not know how you are going to edit the element, I just used a timeout inside the virtual machine to simulate it.

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

I created a small plunkr to demonstrate how this can work. Please note that this is an old version that does not contain the last instance of the animator, so instead of animating, I use addClass / removeClass together.

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

Also check out the official blog post, with additional tips http://blog.durandal.io/2015/07/17/animating-apps-with-aurelia-part-1/

Hope this helps

+5
source

More articles:


All Articles