首页 文章

Angular2 Animation - Animate不透明度，但不是display-attribute

提问于
浏览 次
4

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

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

问题：此时显示块在200ms后设置 . 所以你看不到动画的不透明度 . 应在事件发生后直接设置显示 .

这该怎么做？

angular angular2-animation

1 回答

  • 0

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

    第一个将处理'不透明度'，第二个将处理'display'属性 . 因此，请使用持续时间和延迟时间来获得所需 .

    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'))
    ])
  ]
    回复于

相关问题