Polymer 2.0 - dom-repeat - simple animation

Question

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?

Answer 1

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