聚合物-波纹动画斜英雄动画

Question

我希望一个更了解聚合物的人能帮我解决这个问题。我已经创建了一个简单的应用程序来演示我在我的网站上遇到的问题。本质上，我遇到了问题的波纹动画扭曲我的英雄动画。如果我删除纹章动画，我得到一个正常的英雄动画，但当我添加波纹动画回到它扭曲英雄动画。

下面是我所说的不同之处(看看红色盒子，看看它是如何伸展的)：

无波纹

有波纹

这是我的一些代码

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>

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>

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>

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>

Answer 1

我很快就找到了自己的答案。为了避免将来每个人都头疼，问题是我有一个嵌套的div元素。我是在给它的子代添加纹章动画，红色框(不是显式的)。这就是红盒子上倾斜的原因。