Polymer - 波纹动画扭曲英雄动画

Posted 2023-02-24

【中文标题】Polymer - 波纹动画扭曲英雄动画

【英文标题】：Polymer - Ripple Animation Skews Hero Animation

【发布时间】：2016-01-05 16:29:54

【问题描述】：

我希望对 Polymer 有更多了解的人可以帮助我解决这个问题。我创建了一个简单的应用程序来演示我在我的网站中遇到的问题。本质上，我遇到了波纹动画扭曲我的英雄动画的问题。如果我删除波纹动画，我会得到一个正常的英雄动画，但是当我重新添加波纹动画时，它会扭曲英雄动画。

这就是我所说的区别（看看红框和它是如何伸展的）：

Without Ripple

With Ripple

这是我的一些代码

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>

【问题讨论】：

这是我模仿的例子：morethanreal.github.io/neon-animation-demo/bower_components/…

【参考方案1】：

嗯，我很快就找到了自己的答案。为了避免将来让每个人都头疼，问题是我有一个嵌套的 div 元素。我正在将波纹动画添加到它的孩子，红色框（未明确）。这就是红框偏斜的原因。