CODEWITHSUNDEEP
data-bindingdartpolymer
Basic Coder
Basic Coder

Reputation: 11412

React on DOM changes caused by Data Binding in Polymer

while exploring the pure awesomeness of Polymer and Dart I struggle to get some things animated right after they get inserted to the DOM by Data Binding.

Example:

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

Everytime a new item is inserted or an old one is removed I would like to animate these changes.

Currently I am doing something like this, which works but isn't really nice:

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

and before removing it, I add 'require-end-animation' to the elements which will be removed. The solution works but isn't really that great since I have to keep track of a lot of stuff such as adding the correct attributes at the correct time and removing it. React to transition ending and so on.

Thus I am asking you, is there a cleaner way to react on changes to the DOM which are caused by Data Binding?

Upvotes: 1

Views: 187

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657058

You could create a mixin which overrides attached and detached and does the attribute setting/removal before forwarding the call to super (the element itself) and then apply this mixin on elements you want to animate.

I haven't used mixins a lot myself yet. If mixins don't work well for this you could create an implementation in a normal class and then forward the calls to attached and detached to this implementation.

It could also work to create a wrapper element that just wraps the element you want to animate and implements the animation on attach/detach.

Upvotes: 1

Related Questions