Блог

Я хотел бы добавить анимацию ключевого кадра к 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;}
}
  

убедитесь, что @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 (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)
    }

}
  

Этот код приведет к исчезновению метки при загрузке и будет исчезать между двумя состояниями
при нажатии кнопки.