I am curious as to how i can animate my components.
I tried something simple using a verticallayout and a transition, but my layout gets rendered and then the animation gets triggered.
i also tried [a component animator addon for vaadin-flow]
(https://vaadin.com/directory/component/a-component-animator-addon-for-vaadin-flow/0.4.0). This gives other issues.
Are there issues with animating components at the moment? And how can i get it working?
.login-form {
transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}
public class MainView extends FlexLayout implements RouterLayout {
public MainView() {
VerticalLayout verticalLayout = new VerticalLayout();
verticalLayout.addClassName("login-form");
add(verticalLayout);
Label welcomeLbl = new Label();
welcomeLbl.setWidth("100%");
welcomeLbl.setText("Welcome to!");
verticalLayout.add(welcomeLbl);
TextField usernameFld = new TextField();
usernameFld.setWidth("100%");
usernameFld.setLabel("Username");
usernameFld.setPlaceholder("Username");
verticalLayout.add(usernameFld);
PasswordField passwordField = new PasswordField();
passwordField.setWidth("100%");
passwordField.setLabel("Password");
passwordField.setPlaceholder("Password");
verticalLayout.add(passwordField);
Button submitFld = new Button();
submitFld.setClassName("login-submit-btn");
submitFld.setWidth("100%");
submitFld.setText("Log In");
verticalLayout.add(submitFld);
verticalLayout.setHorizontalComponentAlignment(Alignment.CENTER, submitFld);
Anchor forgotPasswordFld = new Anchor();
forgotPasswordFld.setText("Forgot Password?");
verticalLayout.add(forgotPasswordFld);
verticalLayout.setHorizontalComponentAlignment(Alignment.CENTER, forgotPasswordFld);
}
}