Question

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

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

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

Answer 1

这可以通过Aurelia custom attributes功能完成。

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

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

Answer 2

疯狂的Aurelia-CSS-Animator的创造者在这里：）

为了做你想做的事，你只需要掌握DOM-Element，然后使用Aurelia的动画方法。由于我不知道您将如何编辑项目，因此我只是在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);
}

我创建了一个小傻瓜，以证明这可能有用。请注意，这是一个旧版本，不包含最新的动画制作实例，因此我不是动画，而是使用addClass / removeClass。

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

另请查看官方博客文章，提供更多提示 http://blog.durandal.io/2015/07/17/animating-apps-with-aurelia-part-1/

希望这有帮助

Answer 3

不幸的是，接受的答案对我没有用，显示的值在任何动画完成之前都会改变，看起来很糟糕。

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

    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">

Aurelia.js：当绑定值更改时，如何为元素设置动画？

3 个答案: