Question

我有一些纸质标签和一些CSS代码，如下面的代码片段，但我无法弄清楚如何将动画名称或@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);
            }
        }
    }
}

Answer 1

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

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

将动画传递给Polymer mixin

1 个答案: