当绑定值发生变化时，如何使元素动画化?

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

本文关键字：何使 元素 动画 绑定 变化      更新时间：2023-09-26

我使用Aurelia.js为我的UI。假设我有以下视图标记:

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

绑定到模型"items"。当模型中的一个值发生变化时，我想在显示变化值的单元格中添加动画。我怎样才能做到这一点呢?

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

创建一个新的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>

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

疯狂的Aurelia-CSS-Animator的创造者:)

为了做你想做的事，你只需要获得DOM-Element，然后使用Aurelia的animate方法。因为我不知道你将如何编辑一个项目，我只是在VM中使用了一个超时来模拟它。

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

我已经创建了一个小plunkr来演示它是如何工作的。注意，这是一个旧版本，不包含最新的animator实例，所以我使用addClass/removeClass代替animate。

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

也可以看看官方博客，有更多的提示http://blog.durandal.io/2015/07/17/animating-apps-with-aurelia-part-1/

希望能有所帮助

不幸的是，接受的答案对我不起作用，在任何动画完成之前显示的值都发生了变化，它看起来很糟糕。

我通过使用绑定行为解决了这个问题，绑定更新被拦截，之前应用一个动画，然后更新值，最后完成另一个动画。现在一切看起来都很顺利。

    import {inject} from 'aurelia-dependency-injection';  
import {CssAnimator} from 'aurelia-animator-css';

@inject(CssAnimator)
export class AnimateBindingBehavior {
  constructor(_animator){
    this.animator = _animator;
  }
  bind(binding, scope, interceptor) {
    let self = this;
    let originalUpdateTarget =  binding.updateTarget;
    binding.updateTarget = (val) => {
      self.animator.addClass(binding.target, 'binding-animation').then(() => {
        originalUpdateTarget.call(binding, val);
        self.animator.removeClass(binding.target, 'binding-animation')
      });
    }
  }
  unbind(binding, scope) {
    binding.updateTarget = binding.originalUpdateTarget;
    binding.originalUpdateTarget = null;
  }
}

在样式表中声明你的动画:

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0)
  }
}

    .binding-animation-add{
      animation: fadeOutRight 0.6s;
    }
    .binding-animation-remove{
      animation: fadeInRight 0.6s;
    }

在视图中使用，比如

<img src.bind="picture & animate">
相关文章：