React toggle class + CSS transitions, не работает ... почему?

Я использую классы для управления открытыми / закрытыми поведением с переходом CSS для эффекта. Я использовал это в других классах. Проекты расширяют React . Компонент { / * конструктор, и т.д ... * / визуализации () { возвращение ( < DIV Classname = "проекты-нав-контейнер" > < DIV имя класс = "название центра моноширинного" OnClick = { это . Реквизит . _toggleProjectNav } ID = «Меню» > « Меню» </ div > < ul className = { `projects-nav $ {this.props._isProjectNavOpen? 'open': 'closed'} ` }> { ПРОЕКТЫ . map (( project , index ) => < li key = { index } > <p> проект здесь </ p > </ li > ) } </ ul > </ div > ); } } s, не проблема, но по какой-то причине тот же метод не позволяет мне в этом сценарии ...

Приступаем к открытию / закрытию (я вижу разницу в конце и цвет фона и перевод), но сам переход CSS теряется ... любые идеи, почему я теряю переход на CSS, но все остальное работает как ожидалось?

Обратите внимание, что когда я вручную переключаю открытые / закрытые классы с помощью инструментов разработчика, он работает отлично! Переход CSS происходит!

Итак, что случилось с React on click для переключения класса, но потерять переход CSS?

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            _isProjectNavOpen: true
        }
        this._toggleProjectNav = this._toggleProjectNav.bind(this);
    }
    _toggleProjectNav() {
        this.setState(prevState => ({
            _isProjectNavOpen: !prevState._isProjectNavOpen,
        }));
    }
    render() {
        <div>
            <Router>
                <Route path="/projects" component={(props, state, params) => 
                    <Projects 
                        _toggleProjectNav={this._toggleProjectNav}
                        _isProjectNavOpen={this.state._isProjectNavOpen} 
                    {...props} />} />
            </Router>
        </div>
    }
}

App.js выглядит следующим образом:

.projects-nav {
    @include transition(all $transition_speed ease);
    &.open {
        @include transform(translateY(0));
        background: red
    }
    &.closed {
        @include transform(translateY(-100vh));
        background: green;
    }
}

SCSS:

react-router

javascript,css3,reactjs,css-transitions,

9

Ответов: 3

12 ов
+25

Именно из - за pathдумать о каждом маршруте случае в заявлении выключателя, и <Route />в keyкомпоненте быть react-routerдля этого случая. Когда путь изменяется, компонент полностью размонтируется. Следовательно, вы не видите переходы CSS, потому что DOM для него больше не существует.

Если вы хотите анимировать react-transition-group. Вы должны использовать вызываемую библиотеку утилиты react-router. Вот подробный пример автора, за которым вы можете следовать. Пример анимации Router Routerclass App extends React.Component { constructor() { super(); this.state = { _isProjectNavOpen: true, _ProjectsKey: 1, _RouteKey: 1 } this._toggleProjectNav = this._toggleProjectNav.bind(this); } _toggleProjectNav() { this.setState(prevState => ({ _isProjectNavOpen: !prevState._isProjectNavOpen, _ProjectsKey: prevState._ProjectsKey + 1, _RouteKey: prevState._RouteKey + 1 })); } render() { <div> <Router> <Route key={this.state._RouteKey} path="/projects" component={(props, state, params) => <Projects _toggleProjectNav={this._toggleProjectNav} _isProjectNavOpen={this.state._isProjectNavOpen} key={this.state._ProjectsKey} {...props} />} /> </Router> </div> } }

Надеюсь, это поможет.

3

Ключ изменения должен обновить элемент.

Попробуйте этот код:

render
3

В самом деле, проблема в том, что componentэто размонтирование вашего компонента и его установка снова с новыми классами, что приводит к потере CSS-перехода в процессе. Чтобы решить эту проблему, просто использовать <Route> вместо из componentна react-routerкомпоненте.

Что касается того, почему это работает, из react-routerдокументации:

Вместо того, чтобы создать новый элемент React, созданный для вас с помощью компонента prop, вы можете передать функцию, которая будет вызываться при совпадении местоположения. Класс App расширяет React . Компонент { constructor () { super (); это . состояние = { _isProjectNavOpen : истинно } это . _toggleProjectNav = это . _toggleProjectNav . bind ( this ); } _toggleProjectNav () { this . SetState ( prevState => ({ _isProjectNavOpen : ! prevState . _isProjectNavOpen , })); } render () { <div> < Router > < Route path = "/ projects" render = {( реквизит , состояние , params ) => < Projects _toggleProjectNav = { this . _toggleProjectNav } _isProjectNavOpen = { this . состояние . _isProjectNavOpen } {... реквизит } />} /> </ Router > </ DIV > } } проп получает все тот же маршрут реквизит как компонента делает опору.

Для более подробного объяснения вы можете прочитать вопрос о разнице между маршрутизатором и компонентом .

Итак, App.js должен выглядеть так:

render

Я создал CodeSandbox использованием renderи, кажется, работает правильно!

Ура!

JavaScript, CSS3, reactjs, CSS-переходы,
Похожие вопросы
Яндекс.Метрика