使用 neon-elements 动画光 dom 元素

Question

所以我一直在研究霓虹灯元素示例。特别是 load 示例。

我能够完成我想要的，但我觉得应该有一种更优雅的方式来完成它。该示例加载内容的方式是在 config object 中创建一个数组，然后使用 dom-repeat 从 animated-grid.[=44= 中将它们全部标记出来]

这似乎迫使动画和动画内容之间的耦合非常紧密。我不想在我的网格一侧封装内容我基本上想说 Hey I want an animated grid here are the cells/content to be put inside of it 然后让动画网格负责布局和动画那些 children

我着手创建一个像这样更具声明性的 API。

<animated-grid id="grid">
  <div style="background-color: #9C27B0"> <span>1</span> </div>
  <div style="background-color: #4CAF50"> <span>2</span> </div>
  <div style="background-color: #2196F3"> <span>3</span> </div>
  <div style="background-color: #673AB7"> <span>4</span> </div>
  <div style="background-color: #FF9800"> <span>5</span> </div>
  <div style="background-color: #049688"> <span>6</span> </div>
</animated-grid>

我想我可以将 css 选择器从 .tile 更改为 :host::content div。

然后模板到

  <template>
    <content id='content'></content>
  </template>

然后我尝试重写附加方法以在 lightdom 中获取 children 而不是 queryselecting for .tile

attached: function() {
  this.async(function() {
    var nodeList = Polymer.dom(this.$.content).getDistributedNodes();
    // I only want to animate divs
    nodelist = nodeList.filter(function(node){
      return (node.nodeName === "DIV");
    });
    this.animationConfig['entry'][0].nodes = nodeList;
  });
},

但是，我的控制台中不断出现严重错误。

animated-grid 的最终代码如下所示：

<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">

<dom-module id="animated-grid">

  <link rel="import" type="css" href="../shared.css">

  <style>

    :host {
      display: block;
    }

    :host::content div {
      display: inline-block;
      float: left;
      color: white;
      vertical-align: top;
      width: calc(100% / 3);
      height: calc(100% / 2);

      @apply(--paper-font-title);
      @apply(--layout-vertical);
      @apply(--layout-center-center);
    }

    :host::content div:hover {
      @apply(--shadow-elevation-2dp);
      position:relative;
    }


  </style>

  <template>
    <content id='content'></content>
  </template>

</dom-module>

<script>

  Polymer({

    is: 'animated-grid',

    behaviors: [
      Polymer.NeonSharedElementAnimatableBehavior
    ],

    properties: {

      animationConfig: {
        type: Object,
        value: function() {
          return {
            'entry': [{
              name: 'cascaded-animation',
              animation: 'transform-animation',
              transformFrom: 'translateY(100%)',
              transformTo: 'none',
              timing: {
                delay: 50
              }
            }]
          }
        }
      }
    },

    attached: function() {
      this.async(function() {
        var nodeList = Polymer.dom(this.$.content).getDistributedNodes();
        // I only want to animate divs
        nodelist = nodeList.filter(function(node){
          return (node.nodeName === "DIV");
        });
        this.animationConfig['entry'][0].nodes = nodeList;
      });
    },

    _computeTileClass: function(color) {
      return 'background-color: ' + color + '';
    }

  });

</script>

Answer 1

更新：一位好朋友指出，虽然 JavaScript 仍然很疯狂，但由于 不同的 原因而不是错误的列在这里。错误是从过滤器分配到 nodelist 的变量没有像 var nodeList 那样的大写字母 "L"。在 JS 中，这意味着 nodelist 现在在全局变量对象 global.nodelist 中，这就是为什么 nodeList 似乎没有被正确过滤或分配的原因。所以，另一种解决方案是在过滤器return中将nodelist大写为nodeList，应该没问题。

您所做的一切都很好（附件中的 async 是设置 animationConfig 的正确方法），除了一件事。

你得到的错误是因为你试图用你设置的 cascade-animation 动画文本节点。

您正在尝试为文本节点设置动画，因为您的变量 nodeList 包含所有原始的 13 个灯 dom 子节点，其中包括文本节点，而不仅仅是 div。

~~您过滤的数组未被过滤的原因是因为 JavaScript 很疯狂，并且分配到数组中无法按预期工作，就像在所有其他语言中一样。~~

A 解决方案是为过滤结果使用一个新变量：

var divNodes = nodeList.filter(function(node){
  return (node.nodeName === 'DIV');
});
this.animationConfig.entry[0].nodes = divNodes;

使用 neon-elements 动画光 dom 元素

Animating light dom elements using neon-elements

javascript

web-component

polymer

polymer-1.0