Angular 5 个动画：在 'slideUp' 之前设置 'overlay: hidden'

Question

我有这个触发器：

export const slideInOutTrigger = trigger('slideInOut', [
    state('true', style({
        height: '0',
        opacity: '0',
        overflow: 'hidden'
    })),
    state('false', style({
        height: '*',
        opacity: '1',
        overflow: 'hidden'
    })),
    transition('true => false, 1 => 0', animate('300ms linear')),
    transition('false => true, 0 => 1', animate('300ms linear'))
]);

它被用在一个普通的 Div :

<button (click)="collapsed = !collapsed">Trigger</button>
<div [@slideInOut]="collapsed">
    // other content
    <ng-select>..</ng-select> // <-CUSTOM SELECTBOX
</div>

一切正常，动画流畅。向上滑动时，Div的内容必须是不可见的，所以使用"overlay: hidden"（否则看起来很奇怪）。

与 Div 内容冲突：

"overlay: hidden" 阻碍自定义选择框完全显示。

对比

当到达 Div 的底部边缘时，选择框的选项被剪切。

我的问题： 我要

临时设置 "overlay: 'hidden'" 属性 ，然后 Div 向上滑动。
slideDown完成后，属性应该是再次"overlay: 'visible'"。

感谢任何帮助！

Answer 1

我用下面的状态机解决了这个问题：

export const slideInOutTrigger = trigger('slideInOut', [
    state('true', style({
        height: '0',
        opacity: '0',
        overflow: 'hidden'
    })),
    state('false', style({
        height: '*',
        opacity: '1',
        overflow: 'visible'
    })),
    transition('true => false', animate('300ms linear')),
    transition('false => true', [
        style({ overflow: 'hidden' }),
        animate('300ms linear')
    ])
]);

关键区别在于 transition() 的第二个参数，它需要一组状态和动画。 overflow CSS 属性在 300 毫秒后从隐藏状态转换为非隐藏状态。

Angular 5 个动画：在 'slideUp' 之前设置 'overlay: hidden'

Angular 5 Animations : setting 'overlay: hidden' before 'slideUp'

angular

angular-animations