Web animation reverts back after ends

Question

I have a question regarding the browser compatability of Web Animations. I am aware that it is not working on some browsers.

However, is it possible to still use the transformation that is normally applied by the animation. My animation runs (through neon-animation from Polymer), but the result doesn't stay. It reverts back when the animation is finished.

(Small note, the $$("paper-item") is from polymer and is equivalent to querySelector("paper-item") )

I fixed this on 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 is working on Chrome. Firefox and Safari are having trouble with it though. How can this be fixed?

My complete code is as following:

<!--  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 the problem, but not how to solve it. It would be great to get some help.

The neon-animation-finish is not called at the moment the animation finishes . It is called just before that (not on chrome btw). Then, when the function is called to adjust the styling, it is overwritten by the animation.

Answer 1

You need to define a listener to the animation-finish and define what you want to see when the animation has finished like this:

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

},

Have a look at the Polymer documentation at: https://github.com/PolymerElements/neon-animation/blob/master/README.md