Problem with element.style in Firefox and Safari

[ebidel]

From @BartKoppelmans on December 18, 2015 12:18

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), but the result doesn't stay. It reverts back when the animation is finished.

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>

_Copied from original issue: Polymer/polymer#3216_

[BartKoppelmans]

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

[StephenTurley]

We are having this same issue.

[JamesFigler]

I ran into this issue as well. Chrome plays the animation just fine, but vanishes after playing in Firefox.

[andrewillard]

I'm having this same too

[quangv]

for me neon-animation-finish is not firing for the fade-out-animation (doesn't work for slide-down animation either) only on Safari. Works in FireFox though. (I'm using paper-dialog)

maybe animation.onfinish for Safari in neon-animation-runner-behavior.html isn't firing? I'm not sure. That's as far as I've gone debugging.