Polymer 聚合物-涟漪动画扭曲英雄动画

我希望有更了解聚合物的人能帮我解决这个问题。我已经创建了一个裸体应用程序来演示我在网站上遇到的问题。本质上，我遇到了涟漪动画扭曲我的英雄动画的问题。如果我删除涟漪动画，我会得到一个普通的英雄动画，但当我将涟漪动画添加回它时，会扭曲英雄动画

这里是我所说的区别（看看红色的盒子和它是如何伸展的）：

这是我的一些代码

test-app.html

    <link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="test-app">

    <template>
        <style>
            neon-animated-pages{
                position:relative;
                height:100%;
            }
            .box{
                border:5px solid black;
                width:500px;
                height:500px;
                position:relative;
                overflow:hidden;
            }
        </style>
        <div class="box">
            <neon-animated-pages on-click="switchPages" selected="{{openNeonPage}}">
                <hero-test-card></hero-test-card>
                <hero-test-fixed></hero-test-fixed>
            </neon-animated-pages>
        </div>
    </template>
</dom-module>

<script>
    Polymer({
        is: 'test-app',
        properties:{
            openNeonPage:{
                type:'String',
                value:"0"
            }
        },

        switchPages:function(event){
            if(this.openNeonPage == "0")
                this.openNeonPage = "1";
            else
                this.openNeonPage = "0";
        }
    });
</script>

霓虹动画页面{
位置：相对位置；
身高：100%；
}
.盒子{
边框：5px纯黑；
宽度：500px；
高度：500px；
位置：相对位置；
溢出：隐藏；
}
聚合物({
是：“测试应用程序”，
特性：{
openNeonPage：{
类型：'String'，
值：“0”
}
},
切换页面：功能（事件）{
如果（this.openNeonPage==“0”）
this.openNeonPage=“1”；
其他的
this.openNeonPage=“0”；
}
});

hero-test-card.html

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

<dom-module id="hero-test-card">

    <template>
        <style>
            div{
                position:absolute;
                width:150px;
                height:150px;
                background: red;
            }
        </style>

        <div id="card">
            <p>Content</p>
        </div>

    </template>


</dom-module>

<script>
    Polymer({
        is: 'hero-test-card',
        behaviors: [
            Polymer.NeonSharedElementAnimatableBehavior
        ],
        properties:{
            animationConfig:{
                value:function(){
                    return{
                        'exit':[{
                            name:'hero-animation',
                            id:'hero',
                            fromPage:this,
                        },{
                            name:'ripple-animation',
                            id:'ripple',
                            fromPage:this
                        }]
                    }
                }
            },
            sharedElements:{
                value:function(){
                    return{
                        'hero':this.$.card,
                        'ripple':this.$.card
                    }
                }
            }
        }

    });
</script>

div{
位置：绝对位置；
宽度：150px；
高度：150像素；
背景：红色；
}
内容

聚合物({
是：'英雄测试卡'，
行为：[
Polymer.NeonSharedElementAnimatableBehavior
],
特性：{
动画配置：{
值：函数（）{
返回{
“退出”：[{
名称：'hero-animation'，
id:“英雄”，
fromPage:这个，
},{
名称：'ripple-animation'，
id:“涟漪”，
fromPage：这个
}]
}
}
},
股份转让：{
值：函数（）{
返回{
“英雄”：这张。$卡，
“ripple”：这张。$卡
}
}
}
}
});

hero-test-fixed.html

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

<dom-module id="hero-test-fixed">

    <template>
        <style>
            #fixed{
                position:absolute;
                width:100%;
                height:100%;
                background: green;
                bottom:0;
                right:0;
            }
            #card{
                position:absolute;
                width:150px;
                height:150px;
                bottom:0;
                right:0;
                background:red;
            }
        </style>

        <div id="fixed">
                <div id="card">
                    <p>content</p>
                </div>
        </div>

    </template>


</dom-module>

<script>
    Polymer({
        is: 'hero-test-fixed',
        behaviors: [
            Polymer.NeonSharedElementAnimatableBehavior
        ],
        properties:{
            animationConfig:{
                value:function(){
                    return{
                        'entry':[{
                            name:'ripple-animation',
                            id:'ripple',
                            toPage:this
                        },{
                            name:'hero-animation',
                            id:'hero',
                            toPage:this,

                        }]
                    }
                }
            },
            sharedElements:{
                value:function(){
                    return{
                        'hero':this.$.card,
                        'ripple':this.$.fixed
                    }
                }
            }
        }

    });
</script>

#固定的{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：绿色；
底部：0；
右：0；
}
#卡片{
位置：绝对位置；
宽度：150px；
高度：150像素；
底部：0；
右：0；
背景：红色；
}
内容

聚合物({
是：'英雄测试修正'，
行为：[
Polymer.NeonSharedElementAnimatableBehavior
],
特性：{
动画配置：{
值：函数（）{
返回{
“条目”：[{
名称：'ripple-animation'，
id:“涟漪”，
toPage:这个
},{
名称：'hero-animation'，
id:“英雄”，
toPage：这个，
}]
}
}
},
股份转让：{
值：函数（）{
返回{
“英雄”：这张。$卡，
“ripple”：此项。$。已修复
}
}
}
}
});

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
        <link rel="import" href="bower_components/neon-animation/neon-animation.html">
        <link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
        <link rel="import" href="bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
        <link rel="import" href="bower_components/neon-animation/animations/ripple-animation.html">
        <link rel="import" href="bower_components/neon-animation/animations/scale-down-animation.html">
        <link rel="import" href="bower_components/neon-animation/animations/slide-from-right-animation.html">
        <link rel="import" href="bower_components/neon-animation/animations/fade-in-animation.html">
        <link rel="import" href="bower_components/neon-animation/animations/hero-animation.html">
        <link rel="import" href="elements/card-for-tile.html">
        <link rel="import" href="elements/tile-container.html">
        <link rel="import" href="elements/raw-tile.html">
        <link rel="import" href="elements/test-app.html">
        <link rel="import" href="elements/hero-test-card.html">
        <link rel="import" href="elements/hero-test-fixed.html">

        <!-- <link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html"> -->
        <style>
            html, body{
                height:100%;
            }

        </style>

    </head>

    <body fullbleed unresolved>
        <test-app></test-app>
    </body>

</html>

html，正文{
身高：100%；
}

我很快就找到了自己的答案。为了避免将来让每个人都头疼，问题是我有一个嵌套的div元素。我正在将ripple动画添加到它的子对象红色框中（没有明确说明）。这就是红色框上倾斜的原因。

下面是我模仿的示例：