如何将css-keyframes添加到vaadin组件？

Question

我想一个关键帧动画添加到一个vaadin Label组件:背景应该从使彩色过渡red到yellow.

但是bg颜色不会以任何方式改变.我错过了什么吗？

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)
    }

}

此代码将在加载时淡化标签,并在按钮单击时在两种状态之间淡入淡出.