CSS转换下拉 - 自动滚动到有条件渲染的元素

问题描述 投票:0回答:1

我无法找到正确制作它的方法,以便窗口自动向下滚动到有条件渲染的元素和动画下拉(并在屏幕外)

这是有问题的元素

            <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; 

        }
css reactjs reactcsstransitiongroup
1个回答
1
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.