Question

我对棱角分明的动画很陌生，而且我遇到了一个问题。我有一个堆叠的下拉菜单，当我点击一个菜单项时，我希望它像动画一样滑动到视图中。我使用bootstrap4，div是display：none，在它的第一个状态，然后是display：block。我还有一个指令，用于处理打开和关闭它，并跟踪外部点击。现在，我只能将菜单设置为滑动打开第一次单击或其他所有（如果我在按钮外单击并且菜单关闭，即动画状态未更改，则会不同步）

有没有办法动画一个以角度创建的div？在进入和退出时，我可以获得双向动画吗？这是我的片段：

animations: [
        trigger('menuSlide', [
            state('closed', style({
                'height': '1px',
            })),
            state('open', style({
                'height': '108px',
            })),
            transition('closed => open', animate(50)),
        ])
    ]
})
export class NetworkComponent implements OnInit {
    @ViewChild('DropdownOne') dropdownOne: ElementRef;
    stateOne = 'closed';
    stateTwo = 'closed';

    constructor() {}

    animate() {
        this.stateOne = 'open';
        console.log('open');
        this.normalState(this.stateOne);
    }

    normalState(state) {
        console.log('closed')
        state = closed;
    }

目前它只在第一次动画时打开，我把它变成了一个switch语句，但它再次与外部点击不同步。指令处理状态

这里的指令仅供参考：

// handles dropdown menu and click out function for multiple items

    constructor(private elRef: ElementRef) {}

    @HostListener('document:click', ['$event'])
    clickOut(event) {
        let clickedComponent = event.target;
        let inside = false;

        do {
                if (clickedComponent === this.elRef.nativeElement) {
                    inside = true;
                }
                clickedComponent = clickedComponent.parentNode;
        } while (clickedComponent);
        if (inside) {
            if (this.elRef.nativeElement.classList.contains('show')) {
                this.elRef.nativeElement.classList.remove('show');
            } else {
                this.elRef.nativeElement.classList.add('show');
            }
        } else {
            this.elRef.nativeElement.classList.remove('show');
        }
    }

}

- UPDATE-- 目前我可以通过让它从高处开始来为div设置动画：0px;然后在我想要的高度结束它的状态。但这真的很混乱，关闭时，它有一个轻微的故障＆＃39;因为它收缩然后去显示：无;试。

动画div创建的Angular 2

0 个答案: