网络动画在结束后恢复

Question

我对网络动画的浏览器兼容性有疑问。我知道它不适用于某些浏览器。

但是，是否仍然可以使用动画通常应用的转换。我的动画运行（通过来自 Polymer 的neon-animation），但结果没有保留。动画完成后它会恢复。

（小记，$$("paper-item")来自聚合物，相当于querySelector("paper-item")）

我使用以下代码在 Chrome 上修复了这个问题：

     _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';
        }
     }

如前所述，这适用于 Chrome。不过 Firefox 和 Safari 遇到了麻烦。如何解决这个问题？

我的完整代码如下：

<!--  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>

编辑： 我发现了问题，但不知道如何解决。能得到一些帮助会很棒。

在动画结束的那一刻，neon-animation-finish 不会被调用。它在此之前被调用（不是在 chrome 上）。然后，当调用该函数来调整样式时，它会被动画覆盖。

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