Question

我想要一个按钮，当单击该按钮时，它会显示一些内容并使用Angular 6进行动画处理。我达到了结果，但是很难看，因为我无法为尺寸更改，不透明度和显示效果设置动画。通常，更改大小的动画效果很好，但是我无法达到的是减少按钮图标的不透明度，调整div的大小然后增加内容的不透明度。

我有这个模板：

<div  class="container" [@slideInOut]="helpMenuOpen"  
      [@slideInOutContent]="helpMenuOpen" 
      (click)="toggleHelpMenu()">

      <fa-icon icon="umbrella"></fa-icon>
      <label style="color: red; padding: 50px;" > 
        TEST
      </label>    
</div>

我的动画是这样的：

trigger('slideInOut', [
      state('open', style({ fontSize: '16px', height: '200px', width: '200px' })),
      state('closed', style({ fontSize: '18px', height: '48px', width: '48px' })),
      transition('open => closed', animate('400ms ease-in-out')),
      transition('closed => open', animate('400ms ease-in-out'))
    ]),
    trigger('slideInOutContent', [
      transition('open => closed', [
        group([
          query('fa-icon', animate('400ms ease-in-out', style({ opacity: 1, display: 'flex' }))),
          query('label', animate('400ms ease-in-out', style({ opacity: 0, display: 'none' })))
        ])
      ]),
      transition('closed => open', [
        group([
          query('fa-icon', animate('400ms ease-in-out', style({ opacity: 0, display: 'none' }))),
          query('label', animate('400ms ease-in-out', style({ opacity: 1, display: 'flex' })))          
        ])
      ])
    ])

我制作了许多不同的动画，但没有一个能正常工作。有提示吗？

角度动画：更改div的大小和内容

0 个答案: