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

<dom-module id="settings-page">
    <template>
        <style>
        :host {
            display: block;
            overflow: hidden;
            color: white;
            z-index: 3
        }
        
        #placeholder {
            opacity: 0;
            background-color: #4285f4;
            @apply(--layout-fit);
        }
        
        #container {
            @apply(--layout-fit);
            @apply(--layout-vertical);
            @apply(--layout-center-center);
            background-color: #4285f4;
            padding: 64px 32px 64px 32px;
            box-sizing: border-box;
        }
        </style>
    </template>
    <script>
    'use strict';
    Polymer({
        is: 'settings-page',
        behaviors: [
            Polymer.NeonSharedElementAnimatableBehavior
        ],
        properties: {
            animationConfig: {
                value: function() {
                    return {
                        'entry': [{
                            name: 'ripple-animation',
                            id: 'ripple',
                            toPage: this
                        }, {
                            name: 'fade-out-animation',
                            node: this.$.placeholder,
                            timing: {
                                delay: 250
                            }
                        }, {
                            name: 'fade-in-animation',
                            node: this.$.container,
                            timing: {
                                delay: 50
                            }
                        }],
                        'exit': [{
                            name: 'opaque-animation',
                            node: this.$.placeholder
                        }, {
                            name: 'fade-out-animation',
                            node: this.$.container,
                            timing: {
                                duration: 0
                            }
                        }, {
                            name: 'reverse-ripple-animation',
                            id: 'reverse-ripple',
                            fromPage: this
                        }]
                    };
                }
            },
            sharedElements: {
                value: function() {
                    return {
                        'ripple': this.$.placeholder,
                        'reverse-ripple': this.$.placeholder
                    };
                }
            }
        },
        _switch: function() {
            document.querySelector('#pages').select(0);
        }
    });
    </script>
</dom-module>