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

我正在使用我的UI。假设我有以下视图标记：

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

${item.name}
${item.value}

---

它绑定到一个模型“items”。当模型中的一个值发生更改时，我希望对显示更改值的单元格设置动画。我怎样才能做到这一点呢？

这里是疯狂的Aurelia CSS动画师的创建者：）

为了做您想要做的事情，您只需要掌握DOM元素，然后使用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实例，因此我不使用animate，而是同时使用addClass/removeClass

还可以查看官方博客文章，并提供更多提示

---

希望这有帮助

这可以通过Aurelia功能完成

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

它在构造函数中接收元素和CSS动画。当值更改时，它将使用预定义的CSS类名设置元素的动画。忽略第一个更改（无需在初始加载时设置动画）。以下是如何使用此自定义元素：

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

${someProperty}

---

查看完整的示例或

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

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

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

数据是如何变化的？有什么变化？@dfsq视图模型从websocket获取并更新“项目”字段中的项目。然后，Aurelia的绑定会更新DOM。您需要使用Aurelia animator css模块。如果您自己还没有弄明白，我将在以后创建一个示例。@dfsq Yeh，我安装了它，并从Rob的博客中制作了一些示例，但我还不知道如何解决我的任务。你举个例子会很有帮助的。谢谢你，疯狂的创造者。我让它工作了。你不觉得这种制作动画的方式过于冗长和粗糙吗？对我来说，这不符合Aurelia产生干净代码的意图。我希望使用binding/event/which的简单语法，而不是直接的DOM操作。。。plunkr链接似乎只是Hello World，我没有看到任何动画，实际上也没有涉及任何DOM操作。您所需要的只是要设置动画的元素。除了使用ref属性之外，还有其他方法，但是上面的例子只是描述了一下，因为我不知道您的确切需求。我建议创建一个更具体的SO问题，或者加入Aurelia Gitter讨论，然后将答案反馈给SO。plunkr将在3秒钟后通过更改其背景色来设置列表中第二个元素的动画。我们使用查询选择器，因此我们在VM中使用html，如果我更改视图，它将中断。在我的例子中，我需要选择一个单元格，所以更严格的选择器。setTimeout示例将几乎1对1映射到我的需求，所以在新问题中不需要。我把我的问题抄送给吉特，到目前为止还没有答案。plunkr没有第二个元素，只是Hello world，我想我没有点击正确的链接或smth。Sry我把plunkr的链接搞乱了。现在它被更新了。关于DOM操作，我得到的印象是，您希望真正手动更改DOM，而不是仅选择。是的，你是对的，你应该尽可能避免使用直接选择器，尽管有时它是需要的，或者只是说更快。在这些情况下，ref可能有助于获取元素。下面的方法绝对可以，提供了更好的抽象。另外，您还可以全局注册CustomAttribute以避免require语句，并使用animate方法（请参阅更新的plunkr）。问题是在动画之前显示会发生更改。正确的顺序是：animateOut>changeValue>animateIn。因此，您不会在屏幕中看到值的变化。此解决方案执行以下操作：changeValue>animateOut>animateIn

<img src.bind="picture & animate">