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

您可以创建一个覆盖attached和detached的mixin，并在将调用转发给super（元素本身）之前进行属性设置/删除，然后将此mixin应用于要设置动画的元素。

我自己还没有使用过mixins。如果mixin不能很好地为此工作，您可以在普通类中创建一个实现，然后将调用转发到attached和detached到此实现。

它也可以用于创建一个包装元素，它只包装你想要动画的元素，并在附加/分离时实现动画。

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

1 个答案: