Issue with entry-animation and exit-animations in shop-app

[aflorea4]

I have modified a little bit the shop app demo so that when you're on shop-detail page , viewing a product, if it have defined in the json file a gallery it will display a gallery element with one parameter, an json object of gallery.

The shop-detail-gallery element source code is :

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">

<!--link rel="import" href="../bower_components/neon-animation/animations/opaque-animation.html"-->
<link rel="import" href="../bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/fade-out-animation.html">

<dom-module id="shop-detail-gallery">

  <template>

  <style>
        :host {
            /*@apply(--layout-horizontal);
            @apply(--layout-center-justified);*/
        }

        .dialogContainer {
            @apply(--layout-horizontal);
            @apply(--layout-center-justified);
        }

        .imageContainer {
            max-width:100%;
            max-height: 100%;
            display: block;
            overflow: hidden;
            padding: 0;
        }

        .gallery_image {
            display:inline-block;
            float:left;
            margin:2px;
            padding:6px 6px 0px 6px;
            cursor:pointer;
        }
        .gallery_image img {
            cursor:pointer;
            padding: 0;
            margin: 0;
            max-width: 100px;
            max-height:100px;
            height:100%;
        }

        button {
            border:0;
            background:0;
            padding:0;
            margin:0;
        }

        paper-dialog {
            max-width: 90%;
            max-height: 80%;
            width:100%;
            height:auto;
        }

        paper-dialog .imageContainer img {
            @apply(--layout-center-justified);
            margin-bottom:10px;
            min-width: 100px;
            min-height: 100px;
            display:block;
            width:100%;
            height:auto;
        }
        paper-dialog .alt {
            margin:0;
            display:block;
            font-size:13px;
        }
    </style>

  <template is="dom-repeat" items="{{_returnGalleryArr(gallery)}}" as="image">
    <div class="gallery_image">
        <button on-click="handleTap">
                        <!-- the image below is created just to get the src attribute(as it is the bigger image not the thumbnail) for paper-dialog element inside -->
                        <img alt="{{image.alt}}" src="{{image.url}}" aria-hidden="true" style="display:none;" />
            <img alt="{{image.alt}}" src="{{image.url_thumb}}" />
        </button>
        </div>
  </template>
  <div class="dialogContainer">
        <paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop><!-- add animations -->
            <div class="imageContainer">
                <img id="bigimage" alt="this is the photo" src=""/>
            </div>
            <p class="alt">This is the photo alt.</p>
        </paper-dialog>
  </div>

  </template>

  <script>
    Polymer({
            is: 'shop-detail-gallery',
      properties: {
        gallery: Object
      },
            _returnGalleryArr: function(gallery){
                //console.log(gallery);
                var arr = [];
                var arritm = [];
                for (var i in gallery) {
                        arr[i-1] = [];
                        for(var j in gallery[i]){
                            var s = String(j);
                            arr[i-1][s] = gallery[i][j];
                        }
                }
                return arr;
            },
            handleTap: function(e){
                var dialog = this.$$('#dialog');
                var bigimage = this.$$('#bigimage');
                var bigimagesrc = Polymer.dom(e).path[1].firstElementChild.getAttribute("src");
                bigimage.setAttribute("src", bigimagesrc);
                bigimage.setAttribute("alt", e.target.getAttribute('alt'));

                dialog.toggle();
            }
    });
  </script>
</dom-module>

The issues are : The first time i open an image gallery thumbnail, the paper-dialog works fine with exception to animations, they are not working and in console shows up 2 warnings after opening the dialog : neon-animation-runner-behavior.html:52 paper-dialog: opaque-animation not found! neon-animation-runner-behavior.html:52 paper-dialog: scale-up-animation not found! After clicking outside of the dialog, it disappears as expected but without animation too, and after that in the console shows up another warning : neon-animation-runner-behavior.html:52 paper-dialog: fade-out-animation not found! The paths to animations are verified, they exists and they are correct.. The second issue is about opening the second time the paper-dialog, it has broken width and height properties. Gallery before opening : Gallery image opened first time : Gallery image opened second time :