Выпадающий переход CSS - автоматическая прокрутка к условно отображаемому элементу - PullRequest
Новая
       24

Выпадающий переход CSS - автоматическая прокрутка к условно отображаемому элементу

0 голосов
/ 13 февраля 2019

Я не могу найти способ правильно сделать так, чтобы окно автоматически прокручивалось вниз к элементу, который условно отображался и анимировался для выпадающего (и за пределами экрана)

это рассматриваемый элемент 

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

        }

1 Ответ

0 голосов
/ 13 февраля 2019

Я не уверен, что это именно то, что вы имеете в виду, но вы можете вызвать простую команду javascript для автоматической прокрутки вниз до вашего элемента 

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

в этом примере элемент, к которому нужно прокрутить, имеет имя класса= элемент

...