cssreactjsreactcsstransitiongroup

CSS transition drop down - auto scroll to conditionally rendered element


I cannot find a way to properly make it so that the window automatically scrolls down to the element that is conditionally rendered and animated to drop down (and off the screen)

this is the element in 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> 

this is the css I have for it

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

        }

Solution

  • I am not sure if this is what you mean but you can call a simple javascript command to automatically scroll down to your element

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

    in this example the element to scroll down to has the class name = element