Javascript 聚合物1.0中的英雄动画_Javascript_Polymer_Polymer 1.0

Javascript 聚合物1.0中的英雄动画

javascript polymer

Javascript 聚合物1.0中的英雄动画,javascript,polymer,polymer-1.0,Javascript,Polymer,Polymer 1.0,我正试图通过点击一个红色方块来实现英雄动画（从neon元素）以动画化到另一个自定义元素（element1.html到element2.html）我写了这里记录的所有内容：但点击后什么也不会发生。请指导我如何实现这一点这是我的档案： index.html <!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.mi

我正试图通过点击一个红色方块来实现英雄动画（从neon元素）以动画化到另一个自定义元素（element1.html到element2.html）

我写了这里记录的所有内容：

但点击后什么也不会发生。请指导我如何实现这一点

这是我的档案：

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>
        </name-tag>
        <name-tag1>
        </name-tag1>
    </neon-animated-pages>
 </template>
</body>

</html>

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;"></div>
        </template>
    </dom-module>
    <script>
    Polymer({
        is: "name-tag",
        behaviors: [
            Polymer.NeonAnimationRunnerBehavior
        ],
        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
                    }
                }
            }
        }

    });
    </script>


聚合物({
是：“姓名标签”，
行为：[
聚合物.纳米二氧化钛的性能
],
特性：{
动画配置：{
值：函数（）{
返回{
//传出页面定义“退出”动画
“退出”：{
名称：'英雄动画'，
id:'英雄'，
fromPage：这个
}
}
}
},
股份转让：{
值：函数（）{
返回{
“英雄”：这个。$.hero
}
}
}
}
});

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;"></div>
        </template>
    </dom-module>
    <script>
    Polymer({
        is: "name-tag1",
        behaviors: [
            Polymer.NeonAnimationRunnerBehavior
        ],
        properties: {
            sharedElements: {
                type: Object,
                value: function() {
                    return {
                        'hero': this.$.card,

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

        }
    });
    </script>


聚合物({
是：“name-tag1”，
行为：[
聚合物.纳米二氧化钛的性能
],
特性：{
股份转让：{
类型：对象，
值：函数（）{
返回{
“英雄”：这张。$卡，
}
}
},
动画配置：{
值：函数（）{
返回{
//传入页面定义“entry”动画
“条目”：{
名称：'英雄动画'，
id:'英雄'，
toPage:这个
}
}
}
},
}
});

提前谢谢

你使用了错误的行为

NeonAnimationRunnerBehavior

适用于在其内部播放或运行动画的组件。非常好的例子是

neon动画页面

组件，它实现了

NeonAnimationRunnerBehavior

，因为它在内部运行动画

放置在

neon动画页面中的每个项目都必须实现NeonAnimatableBehavior
，而不是NeonAnimationRunnerBehavior


要运行动画，我们必须以某种方式在可设置动画的组件之间切换。霓虹动画页面的“选定”属性可以帮助我们实现这一点。当selected=“0”
霓虹灯动画页面显示名称标签时，当selected=“1”
霓虹灯动画页面显示name-tag1
组件时

您想在单击后更改视图，但我看不到任何单击事件侦听器。添加将更改选定属性值的单击事件，该事件将正常工作