对由 Polymer 中的数据绑定引起的 DOM 变化做出反应

Question

在探索 Polymer 和 Dart 的纯粹魅力时，我努力让一些东西在通过数据绑定插入到 DOM 后立即动画化。

示例：

<template repeat="{{item in items}}">
    <my-item item="{{item}}"></my-item>
</template>

每次插入新项目或删除旧项目时，我都想对这些更改进行动画处理。

目前我正在做这样的事情，它有效但不是很好：

<style>
[item] { transition: 300ms ease-in-out; transform: translateX(0); ]
[require-start-animation] { transform: translateX(-100%); }
</style>
<template repeat="{{item in items}}">
    <my-item item="{{item}}" require-start-animation></my-item>
</template>

在删除它之前，我将 'require-end-animation' 添加到将要删除的元素中。该解决方案有效但并不是那么好，因为我必须跟踪很多东西，例如在正确的时间添加正确的属性并将其删除。对过渡结束等做出反应。

因此我想问你，是否有更简洁的方法来对由数据绑定引起的 DOM 的更改做出反应？

Answer 1

您可以创建一个 mixin，它覆盖 attached 和 detached 并在将调用转发给 super（元素本身）之前执行属性 setting/removal，然后将此 mixin 应用于元素你想要动画。

我自己还没有经常使用 mixins。如果 mixins 对此效果不佳，您可以在普通 class 中创建一个实现，然后将对 attached 和 detached 的调用转发给该实现。

它也可以创建一个包装器元素，它只包装您想要设置动画的元素并在 attach/detach 上实现动画。

对由 Polymer 中的数据绑定引起的 DOM 变化做出反应

React on DOM changes caused by Data Binding in Polymer

data-binding

dart

polymer