Web动画在结束后恢复原状

Question

我有一个关于Web Animations浏览器兼容性的问题。我知道它不能在一些浏览器上工作。

然而，是否仍然可以使用通常由动画应用的变换？我的动画通过Polymer的neon-animation运行，但结果没有保留。当动画完成时，它会恢复原状。

（小提示，$$("paper-item")来自Polymer，等同于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上不是这样）。然后，在调用函数来调整样式时，它被动画覆盖了。

- Bart Koppelmans

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

- andreasonny83

---

好的，也许你可以尝试切换类而不是编写所有行内 CSS 样式：_onNeonAnimationFinish: function() { if (this.opened) { this.querySelector('paper-item').removeClass('closed'); } else { this.querySelector('paper-item').addClass('closed'); } }并且在样式中创建一个 .closed 的 paper-item 类。 - andreasonny83

不幸的是，这个不起作用。它会给出以下错误：this.querySelector(...).removeClass 不是一个函数。 - Bart Koppelmans

好的，在 Polymer 中不存在 removeClass。请尝试使用另一种方法：this.querySelector('paper-item').setAttribute("class", "closed");。 - andreasonny83

我找到了问题，但不知道如何解决。如果能得到一些帮助就太好了。neon-animation-finish在动画完成时并没有被调用。它是在那之前被调用的（顺便说一下，这不是在Chrome上）。然后，当调用函数来调整样式时，它被动画覆盖了。 - Bart Koppelmans

尝试在animation-finish函数中使用Polymer同步功能，像这样： this.async(function() { this.querySelector('paper-item').setAttribute("class", "closed"); }, 300); - andreasonny83