0

我是角度动画的新手，我遇到了问题。我有一个堆叠的下拉菜单，当我单击一个菜单项时，我希望它像滑入视图一样具有动画效果。我正在使用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 从一个高度开始来为 div 设置动画：0px; 然后在我想要的高度结束它的状态。但这真的很乱，关闭时，它会缩小，然后显示：无；再次。

4

0 回答 0