Блог

Я переношу свой макет с jQuery на React.js . Это очень распространенный вариант, который состоит из:

• заголовок с кнопкой переключения
• sidenav с навигационными ссылками
• содержимое, ширина которого адаптируется к состоянию sidenav.

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

Вот мой:

 class CoreLayout extends Component {
  constructor(props) {
    super(props)

    this.state = {
      sidenavCollapsed: false
    }
  }

  onSidenavToggle() {
    const { sidenavCollapsed } = this.state

    document.body.classList.toggle('collapsed', !sidenavCollapsed)

    this.setState({ sidenavCollapsed: !sidenavCollapsed })
  }

  render() {
    const { sidenavCollapsed } = this.state
    return (
      <div>
        <Header onSidenavToggle={::this.onSidenavToggle}></Header
        <Sidenav>
        <div className="content">content</div>
      </div>
    )
  }
}
  

Я делаю все стили в соответствии с классом, прикрепленным к элементу body:

 .collapsed .header {}
.collapsed .sidenav {}
.collapsed .content {} 
  

По сути, это переключение ширины боковой панели и поля содержимого между 220 и 60.

Итак…

Должен ли я передавать свернутое свойство каждому из элементов макета и добавлять класс collapsed отдельно? То, чего я пытаюсь достичь, похоже на это.

Каков правильный способ fade-out-in анимации элементов sidenav? До сих пор я использовал утилиты jQuery, но я не уверен, правильно ли прямое использование window.requestAnimationFrame() . Я безуспешно пытался ReactCSSTransitionGroup .

Просто добавьте a class на панель навигации при переключении кнопок и анимируйте переход с помощью css.

Смотрите демонстрацию

https://jsfiddle.net/kuLy0g8z/