将动画传递给 Polymer mixin答案

【问题标题】：Passing an animation into Polymer mixin将动画传递给 Polymer mixin
【发布时间】：2017-11-28 23:31:45
【问题描述】：

我有一些纸张标签和一些 CSS 代码，如以下代码 sn-ps，但我不知道如何将动画名称或 @keyframes 传递到 Polymer 用于纸张标签的 mixin（ --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);
            }
        }
    }
}

【问题讨论】：

标签： css polymer polymer-2.x

【解决方案1】：

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

我可能会选择Web Animations 路线，因为这样您可以将动画实现为一个单独的类（在 JavaScript 中），将其混合到元素的实现中，并使用您自己的闪亮动画方法之一。

【讨论】：