Javascript 简单聚合物1.0 Hero转变_Javascript_Polymer_Web Component_Polymer 1.0

Javascript 简单聚合物1.0 Hero转变

javascript polymer

Javascript 简单聚合物1.0 Hero转变,javascript,polymer,web-component,polymer-1.0,Javascript,Polymer,Web Component,Polymer 1.0,我正在测试霓虹灯动画页面在两个元素之间的转换。我可以转换到第二个元素，但是，当我单击以转换回第一个元素时，动画不起作用。我正在关注在这方面已经做了哪些工作。谢谢你的帮助！以下是我迄今为止所做的工作： index.html var scope=document.querySelector（'template[is=“dom bind”]”）；范围。\u onTag1Click=功能（事件）{ 控制台日志（“方形单击”）；此$.pages.selected=1； }; 作用域。\u

我正在测试霓虹灯动画页面在两个元素之间的转换。我可以转换到第二个元素，但是，当我单击以转换回第一个元素时，动画不起作用。我正在关注在这方面已经做了哪些工作。谢谢你的帮助！以下是我迄今为止所做的工作：

index.html


var scope=document.querySelector（'template[is=“dom bind”]”）；
范围。\u onTag1Click=功能（事件）{
控制台日志（“方形单击”）；
此$.pages.selected=1；
};    
作用域。\u onTag2Click=功能（事件）{
此$.pages.selected=0；
};

element1.html


嘿
聚合物({
是：“姓名标签”，
行为：[
聚合物.纳米二氧化钛性能
],
特性：{
动画配置：{
值：函数（）{
返回{
//传出页面定义“退出”动画
“退出”：{
名称：'英雄动画'，
id:'英雄'，
fromPage：这个
}
}
}
},
股份转让：{
值：函数（）{
返回{
“英雄”：这个。$.hero
}
}
}
},
听众：{
“单击”：“单击”
},
_onClick：函数（事件）{
var target=event.target；
控制台日志（“ELE1”+目标）；
这是一个.fire（'tag1-click'）；
}
});

element2.html


哟
聚合物({
是：“name-tag1”，
行为：[
聚合物.纳米二氧化钛性能
],
特性：{
动画配置：{
值：函数（）{
返回{
//传入页面定义“entry”动画
“条目”：{
名称：'英雄动画'，
id:'英雄'，
toPage:这个
}
}
}
},
股份转让：{
类型：对象，
值：函数（）{
返回{
“英雄”：这张。$卡，
}
}
}
},
听众：{
“单击”：“单击”
},
_onClick：函数（事件）{
var target=event.target；
控制台日志（“ELE2”+目标）；
此。fire（'tag2-click'）；
}
});

在index.html中，在

\u onTag1Click

和

\u 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>


var scope=document.querySelector（'template[is=“dom bind”]”）；
范围。\u onTag1Click=功能（事件）{
控制台日志（“方形单击”）；
此$.pages.selected=1；
};    
作用域。\u onTag2Click=功能（事件）{
此$.pages.selected=0；
};

element1在动画退出时定义动画。 element2在动画进入时定义动画。这是正确的。

如果要从element2将动画设置回element1，则element2需要定义动画“退出”，element1需要定义动画“进入”

嘿，感谢您的响应，但这禁用了单击事件。英雄动画对大型元素的效果非常出色。当我单击尝试使其返回动画时，该动画不起作用。看起来您在name-tag1定义中触发了

tag2 click

事件，但您在index.html中监听的是

on tag click

。尝试将其更改为

on-tag2-单击

谢谢。如果我发布了正确的代码，我想这会有所帮助。还是一样的行为。单击事件会导致元素显示，但没有英雄转换。它只是显示，然后隐藏。

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

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

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