如何添加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) 
    } 

} 

此代碼將在加載時淡入標籤，並在按鈕單擊時在兩個狀態 之間淡出。