微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

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

这该怎么做?

解决方法

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

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

animations: [
    trigger('modalStateOpacity',style({ opacity: '1' })),style({ opacity: '0' })),transition('0 <=> 1',animate('200ms ease'))
    ]),trigger('modalStatedisplay',style({ display: 'block' })),style({ display: 'none'  })),transition('0 => 1',animate('0ms ease')),transition('1 => 0',animate('0ms 200ms ease'))
    ])
  ]

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐