CODEWITHSUNDEEP
csspolymerpolymer-2.x
evelynhathaway
evelynhathaway

Reputation: 1887

Passing an animation into Polymer mixin

I have some paper-tabs and some CSS code like the following code snippets, but I can't figure out how to pass in an animation name or @keyframes into the mixin that Polymer uses for paper-tabs (--paper-tabs-selection-bar). How would I go about doing this? Preferably with only CSS, but a best practice with JavaScript is also welcome.

HTML:

<paper-tabs selected="0">
    <paper-tab name="test">Test</paper-tab>
</paper-tabs>

CSS:

/* keyframes can't be accessed without the deprecated /deep/ selector */
paper-tabs {
    --paper-tabs-selection-bar: {
        animation: selection-bar-clear 0.4s ease forwards;
    }
}
@keyframes selection-bar-clear {
    from {
        border-bottom: 2px solid var(--app-header-light-text-color);
    }

    to {
        border-bottom: 2px solid var(--app-header-dark-text-color);
    }
}


/* keyframes aren't parsed in mixins */
paper-tabs {
    --paper-tabs-selection-bar: {
        animation: selection-bar-clear 0.4s ease forwards;
        @keyframes selection-bar-clear {
            from {
                border-bottom: 2px solid var(--app-header-light-text-color);
            }

            to {
                border-bottom: 2px solid var(--app-header-dark-text-color);
            }
        }
    }
}

Upvotes: 0

Views: 84

Answers (1)

craPkit
craPkit

Reputation: 653

Take a look at https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties#custom-properties-shim-limitations to see if this is actually feasible with plain CSS mixins/variables. My guess is no, but I haven't read the full docs, let alone tried this.

I would probably go the Web Animations route, since that way you can implement your animations as a separate class (in JavaScript), mix that into your element's implementation and use one of your own, shiny animation methods.

Upvotes: 1

Related Questions