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

Question

我想添加一个关键帧动画到一个vaadinLabel组件：背景应该从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代码（常规）

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

} 

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