css - 将动画传递到 Polymer mixin

Question

我有一些纸标签和一些 CSS 代码，如以下代码片段，但我不知道如何将动画名称或 @keyframes 传递到 Polymer 用于的混合中纸制标签(--paper-tabs-selection-bar)。我该怎么做呢？最好只使用 CSS，但也欢迎使用 JavaScript 的最佳实践。

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);
            }
        }
    }
}

Answer 1

看看https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties#custom-properties-shim-limitations看看这对于纯 CSS 混入/变量是否真的可行。我的猜测是否定的，但我还没有阅读完整的文档，更不用说尝试了。

我可能会去 Web Animations路由，因为这样您就可以将动画作为一个单独的类(在 JavaScript 中)实现，将其混合到您的元素的实现中并使用您自己的 Shiny 动画方法之一。