角度动画淡入答案

【问题标题】：angular animation fade in角度动画淡入
【发布时间】：2018-06-28 21:41:57
【问题描述】：

小伙伴们有一个问题，有4个按钮，主页面有4个区块，每次点击都需要淡入淡出，第一个区块出现，其余的都隐藏，然后第二个，以此类推。

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

 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'))
    ]),

我想得到这样的结果，以便在单击第二个按钮时，第二个块出现在与第一个块相同的位置，并且我知道当单击第二个按钮时，第一个块会轻轻隐藏，然后是第二个一个人跳到第一位。

请帮忙解决这个问题！

【问题讨论】：

标签： angular animation angular5 css-animations

【解决方案1】：

我已经整合了一个 Angular 模块来提供该功能，尽管它可以滑动元素而不是让它们褪色。

https://www.npmjs.com/package/ng2-slide-down

【讨论】：