CSS 过渡下拉 - 自动滚动到有条件呈现的元素

Question

我找不到合适的方法使 window 自动向下滚动到有条件渲染和动画下拉（并离开屏幕）的元素

这是有问题的元素

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

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

CSS 过渡下拉 - 自动滚动到有条件呈现的元素

CSS transition drop down - auto scroll to conditionally rendered element

css

reactjs

reactcsstransitiongroup