Реагировать useState () - нет css переходов? Просто переходит в новый класс без анимации / перехода - PullRequest
Новая
       41

Реагировать useState () - нет css переходов? Просто переходит в новый класс без анимации / перехода

1 голос
/ 01 мая 2020

У меня есть условный класс, установленный с помощью React's useState() Почему-то переход не анимирован. Он просто переходит к новым значениям класса.

В приведенном ниже примере кода я попытался сделать его максимально чистым для моего случая. С помощью строки className={`collapse my-navbar-collapse ${toggle ? "show" : ""}`} я устанавливаю класс.

Что мне здесь не хватает?

header.js

import React, { useState } from "react"
import "./header.sass"

const Header = () => {
  const [toggle, setToggle] = useState(false)

  return (
    <div className={'sticky-top'}>

      <button
        className="btn navbar-toggler"
        type="button"
        onClick={ () => setToggle(!toggle) }
      >
        button stuff
      </button>

      <div className={`collapse my-navbar-collapse ${toggle ? "show" : ""}`}>
        rest of my stuff
      </div>

    </div>

  )
}

export default Header

header.sass

.my-navbar-collapse
  background-color: red
  transition: all 2s ease
  height: 0

  &.show
    height: 100vh

(когда все заработает, я изменю transition: all 2s ease с all на height. Я просто хочу сначала отловить все для этого теста:)

1 Ответ

2 голосов
/ 01 мая 2020

У меня не было проблем с переходом по высоте, как вы можете видеть из этой демонстрации.

Однако, похоже, вы забыли overflow: hidden в своем css. Вам это нужно, потому что по умолчанию css пытается убедиться, что ничто не потеряно, даже если это портит стили, поэтому для того, чтобы текст «Остальные мои вещи» был скрыт, когда ваша навигационная панель свернута, вам нужно убедиться, что скрыть это.

Похоже, проблема в классе коллапса. Переходы Bootstrap. css добавляет display: none через этот класс. Если нет дисплея, то css не может перейти должным образом. Отсюда проблема.

В примере теперь есть 2 кнопки, одна из которых вызывает div, у которого есть класс коллапса, у другого div его нет. 

const Header = () => {
  const [toggle, setToggle] = React.useState(false);
  const [toggle2, setToggle2] = React.useState(false);
  return (
    <div className={'sticky-top'}>
      <button
        className="btn navbar-toggler"
        type="button"
        onClick={() => setToggle(!toggle)}
      >
        button stuff - collapse
      </button>

      <div className={`collapse my-navbar-collapse ${toggle ? 'show' : ''}`}>
        rest of my stuff
      </div>
      <button
        className="btn navbar-toggler"
        type="button"
        onClick={() => setToggle2(!toggle2)}
      >
        button stuff - no collapse
      </button>

      <div className={`my-navbar-collapse ${toggle2 ? 'show' : ''}`}>
        rest of my stuff
      </div>
    </div>
  );
};
ReactDOM.render(<Header />, document.querySelector('#root'));
.my-navbar-collapse {
  background-color: red;
  transition: height 2s ease;
  height: 0;
  overflow: hidden;
}

.my-navbar-collapse.show {
  height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root" />
...