CSS 过渡下拉菜单 - 自动滚动到有条件渲染的元素

Question

>我找不到一种方法来正确制作它，以便窗口自动向下滚动到有条件地渲染和动画以下拉(并离开屏幕(的元素

这是有问题的元素

            <CSSTransitionGroup transitionEnterTimeout={1000} transitionLeaveTimeout={1000} transitionName="menu">
            {
                (this.state.lowerBarClicked && dropDownablePlan) ? 
                        <div className='lowerBar__moreInfo'>
                                <div className='chart__header'>Usage Based Plans</div>
                                <div className='chart__main'> 
                                    <Chart />
                                </div>
                                <div className='chart__callToAction'>
                                    <p className='chart-monthlyOrder'>Your Average Montly Order number: {orderNumber}</p>
                                    <button className='btn cta'>Upgrade</button>
                                    <p className='chart-lowerMessage'>See a feature you want? Contact us about Custom plans <a href=''>here</a></p>
                                </div>
                        </div>   
                    : null
            }
            </CSSTransitionGroup> 

这是我的 CSS

        .menu-enter {
            max-height: 0px;
            -webkit-transition: max-height 1s ease;
            overflow: hidden; 
        }
          .menu-enter.menu-enter-active {
            height: auto;
            max-height: 40rem;
            background-color: #E8E4E4;
        }   
          .menu-leave {
            max-height: 40rem;
            -webkit-transition: max-height 1s ease; 
        }
          .menu-leave.menu-leave-active {
            overflow: hidden;
            max-height: 0px; 
        }

Answer 1

我不确定这是否是您的意思，但您可以调用一个简单的 javascript 命令来自动向下滚动到您的元素

document.querySelector(".element").scrollIntoView()

在此示例中，要向下滚动到的元素具有类名 = 元素