[英]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
). 我有一些纸张标签和一些CSS代码,例如以下代码段,但我不知道如何将动画名称或
@keyframes
到Polymer用于纸张标签的mixin中( --paper-tabs-selection-bar
)。 How would I go about doing this? 我将如何去做呢? Preferably with only CSS, but a best practice with JavaScript is also welcome.
最好只使用CSS,但也欢迎使用JavaScript的最佳实践。
HTML: HTML:
<paper-tabs selected="0">
<paper-tab name="test">Test</paper-tab>
</paper-tabs>
CSS: 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);
}
}
}
}
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. 查看https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties#custom-properties-shim-limitations,以了解使用纯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. 我可能会选择“ Web动画”路线,因为这样您可以将动画作为单独的类(在JavaScript中)实现,将其混合到元素的实现中,并使用自己的闪亮的动画方法之一。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.