聚合物1.0中的英雄动画

Question

I am trying to implement hero animation(from neon-elements) to animate to another custom element(element1.html to element2.html) by clicking a red square. 我试图通过单击一个红色方块来实现英雄动画（从neon-elements）动画到另一个自定义元素（element1.html到element2.html）。

I wrote everything that is documented here: https://github.com/PolymerElements/neon-animation#shared-element 我写了这里记录的所有内容： https ： //github.com/PolymerElements/neon-animation#shared-element

But nothing happens on click. 但点击没有任何反应。 Please guide me on implementing this. 请指导我实施这个。

Here are my files: 这是我的文件：

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

element2.html 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>

Thanks in Advance. 提前致谢。

Answer 1

You are using wrong behavior. 你使用的是错误的行为。 NeonAnimationRunnerBehavior is for components who play or run the animation inside themselves. NeonAnimationRunnerBehavior适用于在自己内部播放或运行动画的组件。 Very good example will be neon-animated-pages component, it implements NeonAnimationRunnerBehavior because it runs animations inside. 非常好的例子是neon-animated-pages组件，它实现了NeonAnimationRunnerBehavior因为它在里面运行动画。
Every item which placed in neon-animated-pages has to implement NeonAnimatableBehavior , not NeonAnimationRunnerBehavior . 放置在neon-animated-pages每个项目都必须实现NeonAnimatableBehavior ，而不是NeonAnimationRunnerBehavior 。
To run the animation we have to switch somehow between our animatable components. 要运行动画，我们必须以某种方式在我们的动画组件之间切换。 The "selected" attribute of neon-animated-pages help us with that. 霓虹动画页面的“选定”属性可以帮助我们。 When selected = "0" neon-animated-pages shows you name-tag , when selected = "1" neon-animated-pages shows you name-tag1 component. 当selected = "0" neon-animated-pages显示name-tag ，当selected = "1" neon-animated-pages显示name-tag1组件。
You want to change view after click but I don't see any click event listeners. 您希望在单击后更改视图，但我没有看到任何单击事件侦听器。 Add click events which will change selected attribute value and it'll work. 添加将更改所选属性值的单击事件，它将起作用。

聚合物1.0中的英雄动画

问题描述

1 个解决方案

解决方案1
1 2015-06-16 12:28:36

聚合物1.0中的英雄动画

问题描述

1 个解决方案

解决方案1 1 2015-06-16 12:28:36

解决方案1
1 2015-06-16 12:28:36