Угловая анимация - кнопка остается над анимированными элементами - PullRequest
Новая
       7

Угловая анимация - кнопка остается над анимированными элементами

0 голосов
/ 22 января 2019

Я сделал простой GIF, так что покажите эффект.

enter image description here

Код довольно прост.У меня есть «обертка» и две стороны.
Все делается с использованием display: flexbox для обтекания div и flex: 1 для нужного элемента.
«Очистить выделение» - это mat-stroked-button.

Часть шаблона: 

<div id="wrapper">
    <div id="left" *ngIf="expanded" [@expand]>
        <my-left-component></my-left-component>
    </div>
    <mat-divider vertical></mat-divider>
    <div id="right">
        <my-right-component
            (toggleExpand)="expanded = !expanded"
        ></my-right-component>
    </div>
</div>

Код анимации: 

trigger('expand', [
    transition(':enter', [
        style({ width: '0px', minWidth: '0', display: 'none' }),
        animate(
            '1500ms cubic-bezier(0.4, 0.0, 0.2, 1)',
            style({
                width: '*'
            })
        )
    ]),
    transition(':leave', [
        style({ width: '*' }),
        animate(
            '1500ms cubic-bezier(0.4, 0.0, 0.2, 1)',
            style({
                width: '0px',
                minWidth: '0',
                display: 'none'
            })
        )
    ])
])
...