Question

我正在测试霓虹动画页面以在两个元素之间转换。我转换到第二个元素工作，但是，当我点击转换回第一个元素时，动画不起作用。我正在关注stackoverflow post已经完成的工作。谢谢你的帮助！这是我到目前为止所做的工作：

的index.html

<!DOCTYPE html>
<html>
<head>
 <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
 <link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
 <link rel="import" href="bower_components/neon-animation/neon-animations.html">
<link rel="import" href="element1.html">
<link rel="import" href="element2.html">
</head>
<body>
<template is="dom-bind">
 <neon-animated-pages id="pages" selected="0">
    <name-tag on-tag1-click="_onTag1Click">
    </name-tag>
    <name-tag1 on-tag-click="_onTag2Click">
    </name-tag1>
 </neon-animated-pages>
</template>
<script>
     var scope = document.querySelector('template[is="dom-bind"]');
  scope._onTag1Click = function(event) {
    console.log("Square clicked");
      this.$.pages.selected = 1;
  };    
      scope._onTag2Click = function(event) {
    this.$.pages.selected = 0;
  };    
</script>

element1.html

    <link rel="import" href="bower_components/polymer/polymer.html">

<link rel="import" href="bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
<dom-module id="name-tag">
    <template>

        <div id="hero" style="background:red; width:100px; height:100px; position:absolute; left:100px; top:50px;"> HEY</div>
    </template>
</dom-module>
<script>
Polymer({
    is: "name-tag",
    behaviors: [
        Polymer.NeonAnimatableBehavior 
    ],
    properties: {
        animationConfig: {
            value: function() {
                return {
                    // the outgoing page defines the 'exit' animation
                    'exit': {
                        name: 'hero-animation',
                        id: 'hero',
                        fromPage: this
                    }
                }
            }
        },
        sharedElements: {
            value: function() {
                return {
                    'hero': this.$.hero
                }
            }
        }
    },

        listeners: {
          'click': '_onClick'
        },
        _onClick: function(event) {
            var target = event.target;
            console.log("ELE1 "+target);
            this.fire('tag1-click');
        }

});
</script>

element2.html

  <link rel="import" href="bower_components/polymer/polymer.html"> 
<link rel="import" href="bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
<dom-module id="name-tag1">
    <template>
        <div id="card" style="background:red; width:200px; height:200px; position:absolute; left:300px; top:100px;">YO</div>
    </template>
</dom-module>
<script>
Polymer({
    is: "name-tag1",
    behaviors: [
        Polymer.NeonAnimatableBehavior 
    ],
    properties: {

        animationConfig: {
            value: function() {
                return {
                    // the incoming page defines the 'entry' animation
                    'entry': {
                        name: 'hero-animation',
                        id: 'hero',
                        toPage: this
                    }
                }
            }
        },
          sharedElements: {
            type: Object,
            value: function() {
                return {
                    'hero': this.$.card,

                }
            }
        }

    },
     listeners: {
          'click': '_onClick'
        },
        _onClick: function(event) {
            var target = event.target;
            console.log("ELE2 "+target);
            this.fire('tag2-click');
        }
});
</script>

Answer 1

在index.html中，您需要在_onTag1Click和_onTag2Click周围添加一些花括号。那应该解决它

<!DOCTYPE html>
<html>
<head>
 <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
 <link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
 <link rel="import" href="bower_components/neon-animation/neon-animations.html">
<link rel="import" href="element1.html">
<link rel="import" href="element2.html">
</head>
<body>
<template is="dom-bind">
 <neon-animated-pages id="pages" selected="0">
    <name-tag on-tag1-click="{{_onTag1Click}}">
    </name-tag>
    <name-tag1 on-tag-click="{{_onTag2Click}}">
    </name-tag1>
 </neon-animated-pages>
</template>
<script>
     var scope = document.querySelector('template[is="dom-bind"]');
     scope._onTag1Click = function(event) {
        console.log("Square clicked");
        this.$.pages.selected = 1;
     };    
     scope._onTag2Click = function(event) {
        this.$.pages.selected = 0;
     };    
</script>

Answer 2

element1在退出时定义动画。 element2在进入时定义动画。这是正常的。如果你想从element2动画回传到element1，那么element2需要定义一个动画＆＃39;退出＆＃39;并且element1需要定义动画＆＃39;条目＆＃39; < / p>

Simple Polymer 1.0 Hero Transition

2 个答案: