Web animation returns after completion

Question

I have a question regarding browser compatibility with web animations. I know that it does not work in some browsers.

However, is it possible to use a transformation that is commonly used by animation. My animation works (via neon-animationfrom Polymer), but the result does not remain. It comes back after completion of animation.

(Notice that it $$("paper-item")is made of polymer and is equivalent querySelector("paper-item"))

I installed this in Chrome with the following code:

     _onNeonAnimationFinish: function() {
        if (this.opened) {
           this.$$("paper-item").style.margin = '16px auto';
           this.$$("paper-item").style.width = '84vw';
           this.$$("paper-item").style.height = '144px';
        } else {
           this.$$("paper-item").style.margin = "0px auto";
           this.$$("paper-item").style.width = '72vw';
           this.$$("paper-item").style.height = '72px';
        }
     }

As said, this works with Chrome. Firefox and Safari have problems with this though. How can this be fixed?

My complete code is as follows:

<!--  Custom element -->
<dom-module id="agenda-item">
   <template>
      <style>
         paper-item {
            background-color: #ffffff;
            width: 72vw;
            margin: 0 auto;
            height: 72px;
         }
      </style>


      <paper-item>
         - content -
      </paper-item>

   </template>
   <script>
      Polymer({
         is: 'agenda-item',
         behaviors: [
            Polymer.NeonAnimationRunnerBehavior
         ],
         properties: {
            opened: {
               type: Boolean,
               value: false,
               reflectToAttribute: true
            },
            animationConfig: {
               value: function() {
                  return {
                     'expand': [{
                        name: 'expand-list-item-animation',
                        node: this.$$("paper-item"),
                        timing: {
                           duration: 1000
                        }
                     }],
                     'collapse': [{
                        name: 'collapse-list-item-animation',
                        node: this.$$("paper-item"),
                        timing: {
                           duration: 1000
                        }
                     }]
                  };
               }
            }
         },
         listeners: {
            'tap': 'onClick',
            'neon-animation-finish': '_onNeonAnimationFinish'
         },
         onClick: function(event) {
            if (this.opened) {
               this.collapse();
            } else {
               this.expand();
            }
         },
         expand: function() {
            this.cancelAnimation();
            this.playAnimation('expand');
            this.opened = true;
         },
         collapse: function() {
            this.cancelAnimation();
            this.opened = false;
            this.playAnimation('collapse');
         },
         _onNeonAnimationFinish: function() {
            if (this.opened) {
               this.$$("paper-item").style.margin = '16px auto';
               this.$$("paper-item").style.width = '84vw';
               this.$$("paper-item").style.height = '144px';
            } else {
               this.$$("paper-item").style.margin = '0px auto';
               this.$$("paper-item").style.width = '72vw';
               this.$$("paper-item").style.height = '72px';
            }
         }
      });
   </script>
</dom-module>



<!--  Custom animation -->
<!--  Both custom animations have the same idea and similar code  -->
<script>
   Polymer({

      is: 'expand-list-item-animation',

      behaviors: [
         Polymer.NeonAnimationBehavior
      ],

      configure: function(config) {
         var node = config.node;

         if (config.transformOrigin) {
            this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
         }

         this._effect = new KeyframeEffect(node, [{
            offset: 0.0,
            'margin': '0 auto',
            'width': '72vw',
            'height': '72px'
         }, {
            offset: 0.6,
            'margin': '16px auto',
            'width': '84vw',
            'height': '72px'
         }, {
            offset: 1.0,
            'margin': '16px auto',
            'width': '84vw',
            'height': '144px'
         }], this.timingFromConfig(config));

         return this._effect;
      }

   });
</script>

EDIT: I found a problem, but not how to solve it. It would be great to get some help.

- . ( btw). , , .

Answer 1

, , :

listeners: {
// this event is fired when the animation finishes
'neon-animation-finish': '_onNeonAnimationFinish'

},

Polymer : https://github.com/PolymerElements/neon-animation/blob/master/README.md