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

请务必从主题@mixin中删除@keyframes。下一个您的.v-label-red需要背景设置（最有可能与背景设置相同）关键帧中的to也需要一些时间来处理它（现在它基本上是从白色 - ＆gt;红色 - ＆gt;黄色 - ＆gt;白色的。这是一个例如，这应该会带你走上正轨：

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

}

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

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

1 个答案: