Question

我想在Vaadin中看到一些淡化Animator的例子，每次我尝试动画一些布局或组件后按钮点击没有任何作用，没有文档如何做到

Answer 1

制作动画的最佳方式是使用CSS。你可以点击按钮点击你想要设置动画的元素的类名，然后定义类似这样的类（在你的情况下，你将使用Vaadin的addStyleName（）方法添加类，而不是JS）

document.querySelector('#hide-button').addEventListener('click', () => {
  document.querySelector('.your-element').classList.add('hide');
});

.your-element {
  transition: opacity 400ms;
  background: blue;
  height: 200px;
  width: 200px;
}

.your-element.hide {
  opacity: 0;
}

<div class="your-element"></div>
<button id="hide-button">Hide</button>

Answer 2

您是否尝试过动画插件？

安装并编译widgetset后，您可以使用：

Animator.animate(component, new Css().opacity(0));
Animator.animate(component, new Css().translateX("100px")).delay(1000).duration(2000);