Question

我希望有更多了解Polymer的人可以帮我解决这个问题。我已经创建了一个简单的应用程序来演示我在我的网站中遇到的问题。基本上，我遇到了涟漪动画扭曲我的英雄动画的问题。如果我删除了涟漪动画，我会得到一个普通的英雄动画，但当我添加涟漪动画时会扭曲英雄动画。

这就是我所说的差异（看看红色框以及它是如何伸展的）：

@ReponseBody

Without Ripple

以下是我的一些代码

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

英雄试验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>

英雄试验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元素。我正在为其孩子添加涟漪动画，红色框（未明确）。这是红盒子歪斜的原因。

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

1 个答案: