snapdrop/app/elements/x-cards/x-cards.html

<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<dom-module id="x-cards">
    <template>
        <style>
        :host {
            display: block;
            overflow: hidden;
        }
        
        #placeholder {
            opacity: 0;
            background-color: grey;
            @apply(--layout-fit);
        }
        
        paper-icon-button {
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 2;
            color: #313131;
        }
        
        paper-icon-button:hover {
            color: #4285f4;
        }
        </style>
        <div id="placeholder"></div>
        <div id="container">
            <paper-icon-button id="btn" icon="chat:info-outline" on-tap="_switch"></paper-icon-button>
            <content select="div"></content>
        </div>
    </template>
</dom-module>
<script>
(function() {
    Polymer({
        is: 'x-cards',
        behaviors: [
            Polymer.NeonSharedElementAnimatableBehavior
        ],
        properties: {
            animationConfig: {
                value: function() {
                    return {
                        'entry': [{
                            name: 'reverse-ripple-animation',
                            id: 'reverse-ripple',
                            toPage: this
                        }],
                        'exit': [{
                            name: 'fade-out-animation',
                            node: this.$.container,
                            timing: {
                                delay: 150,
                                duration: 0
                            }
                        }, {
                            name: 'ripple-animation',
                            id: 'ripple',
                            fromPage: this
                        }]
                    };
                }
            },
            sharedElements: {
                value: function() {
                    return {
                        'ripple': this.$.btn,
                        'reverse-ripple': this.$.btn
                    };
                }
            }
        },
        _switch: function() {
            document.querySelector('#pages').select(1);
        }
    });
})();
</script>