java - 如何向 vaadin 组件添加 css 关键帧？

Question

我想向 vaadin Label 组件添加关键帧动画:背景应进行从 红色 到黄色。

但是背景颜色没有任何改变。我错过了什么吗？

private Label label = new Label("background red fading");
lable.setCss("red");

CSS:

.v-label-red {
    @include red;
}

关键帧:

@-webkit-keyframes red {
    from {background: red;}
    to {background: yellow;}
}
@keyframes red {
    from {background: red;}
    to {background: yellow;}
}

Answer 1

请确保将@keyframes 排除在主题的主要@mixin 之外。下一个 您的 .v-label-red 需要背景设置(很可能与 关键帧中的 to 并且还需要一些时间来处理它(现在它 基本上很快就会从白色 -> 红色 -> 黄色 -> 白色。这是一个 例如，这应该会让您走上正确的道路:

CSS

@import "../reindeer/reindeer.scss";

@keyframes keyframe1 {
    from {background: red;}
    to {background: yellow;}
}
@keyframes keyframe2 {
  from {background: yellow;}
  to {background: red;}
}

@mixin app {
  @include reindeer;

  .keyframe1 {
    background: yellow;
    -webkit-animation: keyframe1 1s linear;
    -moz-animation: keyframe1 1s linear;
    -ms-animation: keyframe1 1s linear;
    animation: keyframe1 1s linear;
  }

  .keyframe2 {
    background: red;
    -webkit-animation: keyframe2 1s linear;
    -moz-animation: keyframe2 1s linear;
    -ms-animation: keyframe2 1s linear;
    animation: keyframe2 1s linear;
  }

}

Vaadin UI 代码(groovy)

@VaadinUI
@Theme('app')
@CompileStatic
class AppUI extends UI {

    final static String K1 = 'keyframe1'
    final static String K2 = 'keyframe2'

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final layout = new VerticalLayout()
        layout.setSpacing(true)
        layout.setMargin(true)
        final headline = new Label('Hello World')
        headline.addStyleName(K1)
        final button = new Button("toggle", {
            if (headline.styleName.contains(K1)) {
                headline.addStyleName(K2)
                headline.removeStyleName(K1)
            } else {
                headline.addStyleName(K1)
                headline.removeStyleName(K2)
            }
        } as Button.ClickListener)
        layout.addComponents(headline, button)
        setContent(layout)
    }

}

此代码将在加载时淡出标签，并在两种状态之间淡出 单击按钮时。