Angular 角度动画淡入

伙计们有一个问题，有4个按钮，主页上有4个块，每次点击我都需要fadeIn，第一个块出现了，其余的都隐藏了，然后是第二个，依此类推

问题是，当您按下第一个按钮时，第一个块隐藏在其位置，第二个块跳到第一个位置，代码如下：

 animations: [
    trigger('anyState', [
      state('inactive', style({
        opacity: '0.0',
        transform: 'scale(0.0)',
        display: 'none'
      })),
      state('active',   style({
        opacity: '1.0',
        transform: 'scale(1.0)',
        display: 'block'
      })),
      transition('inactive => active', animate('1000ms ease-in')),
      transition('active => inactive', animate('1000ms ease-out'))
    ]),

我想得到这样的结果，当点击第二个按钮时，第二个块显示在与第一个块相同的位置，当点击第二个按钮时，第一个块轻轻隐藏，然后第二个块跳到第一个位置

---

请帮我解决这个问题

我放在一起的一个角度模块提供了这种功能，尽管它可以滑动元素而不是使其褪色