6

我想用 Angular2 动画显示和隐藏我的模态组件。目前这是我的代码：

animations: [
    trigger('modalState', [
      state('true', style({
        display: 'block',
        opacity: '1'
      })),
      state('false',   style({
        display: 'none',
        opacity: '0'
      })),
      transition('* => *', animate('200ms ease'))
    ])
  ]

问题：目前显示块在200ms后设置。所以你看不到动画的不透明度。显示应在事件后直接设置。

这个怎么做？

4

3 回答 3

5

您可以将动画挂钩用于离散的 CSS 属性，例如display. 因此，您的动画将仅包含不透明度：

animations: [
  trigger('modalState', [
    state('true', style({
      opacity: '1'
    })),
    state('false', style({
      opacity: '0'
    })),
    transition('* => *', animate('200ms ease'))
  ])
]

然后在您的模板中，您可以使用动画开始/结束挂钩来切换display：

<div
  [@modalState]="isShown"
  (@modalState.start)="$event.element.style.display = 'block'"
  (@modalState.done)="$event.element.style.display = ($event.toState ? 'block' : 'none')">
  ...
</div>

假设isShown是布尔值。

于 2019-11-13T15:00:05.220 回答
4

您可以对同一元素使用 2 个不同的触发器。

第一个将处理“不透明度”，第二个将处理“显示”属性。所以使用持续时间和延迟时间来获得你需要的东西。

animations: [
    trigger('modalStateOpacity', [
      state('true',  style({ opacity: '1' })),
      state('false', style({ opacity: '0' })),
      transition('0 <=> 1', animate('200ms ease'))
    ]),
    trigger('modalStateDisplay', [
      state('true',  style({ display: 'block' })),
      state('false', style({ display: 'none'  })),
      transition('0 => 1', animate('0ms ease')),
      transition('1 => 0', animate('0ms 200ms ease'))
    ])
  ]
于 2017-06-11T10:37:26.920 回答
1

你就在附近。您必须将样式设置为 display:'block' 才能看到动画，至少在从状态 false 到 true 的过渡开始时

trigger('showOrHide', [
   state('true', style({ opacity: 1, display: 'block' })),
   state('false', style({ opacity: 0, display: 'none' })),
   transition('0 <=> 1', [
      style({ display: 'block' }), 
      animate('200ms ease')
   ]),
]),
于 2020-10-23T09:45:45.027 回答