1

I have build some component in Polymer 2.0, in this component i have dom-repeat block in dom-if. Is there any simple and fast way to add some animation, on open, and close this repat block?

Here is my code:

<template id="drop-down-list-container" is="dom-if" if="{{_isDropDownOpen}}">
        <div id="drop-down-list">
            <template is="dom-repeat" items="{{itemsTitles}}">
                <button on-click="_onDropDownItemClick" class="button-style items">{{item}}</button>
            </template>
        </div>
    </template>

I want to have some simple animations when _isDropDownOpen change state -> from 0 to 1 - entry animation, from 1 to 0 close animation. It is simple to add this? Should I use neon animations?

Maciej Wojcik
  • 2,115
  • 2
  • 28
  • 47
  • 1
    Do not use neon-animation, it is deprecated - https://github.com/PolymerElements/neon-animation/tree/2.0-preview – Nicolas May 16 '17 at 11:50
  • You could do some CSS transitions, as an alternative to Polymer-specific code – Evan Bechtol May 16 '17 at 14:00
  • you could also just add a class/attribute to your element and hide/show your div with css. (instead of using dom if) [uses less dom modules so it has "some" performance benefit] – daKmoR May 17 '17 at 00:24
  • 1
    @daKmoR yes that's possible solution, but i still want to use dom-if – Maciej Wojcik May 17 '17 at 10:23

1 Answers1

0

Why not use the iron-collapse, it has animation build in see iron-collapse

Bravebox
  • 33
  • 6