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()

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