css - Svelte:内联 CSS 动画不起作用

Question

不能像这样的内联 CSS 动画工作:

<h1 class="test" style="animation: bg 2s linear infinite">Hello {name}!</h1>

<style>
.test { 
    background: yellow;
}

@keyframes bg {
    from {
      background: red;
    }
    to {
      background: green;
    }
  }
</style>

https://svelte.dev/repl/e32b72cb98cb4b78a47b1bcb1ecab9e9?version=3.53.1

但是如果删除style属性

<h1 class="test">Hello {name}!</h1>

并添加

.test 
    background: yellow;
    animation: bg 2s linear infinite;
}

它有效! 但我想添加动画作为内联样式。

Answer 1

默认情况下，组件样式中的所有内容都仅限于组件，并且内联样式显然不会被识别为引用定义的@keyframes。

可以在选择器周围使用 :global() 将常规选择器设为全局，但对于 @keyframes ，您必须在名称前加上 -global- (在编译时再次删除)。

@keyframes -global-bg { ... }

REPL

请注意，这实际上被定义为全局，然后任何其他定义名为 bg 的全局关键帧的组件都会造成干扰。