Переходы CSS игнорируются, потому что реагирует на повторную визуализацию
Я пытаюсь использовать переходы css, но, поскольку реакция повторно отображает компонент, они игнорируются. Давайте представим пример использования, в котором моя функция render() выводит что-то вроде этого:
<ul>
<li className = {this.state.path== = "/menu1/" ? "active" : "inactive"}>
menu 1
</li>
<li className = {this.state.path== = "/menu2/" ? "active" : "inactive"}>
menu 2
</li>
<li className = {this.state.path== = "/menu3/" ? "active" : "inactive"}>
menu 3
</li>
</ul>
Представим, что:
- .active помещает синий фон и анимирует цвет фона
- .inactive помещает красный фон и анимирует цвет фона
Приложение загружается с активным / menu1. Используя реагирующий маршрутизатор, я обновляю состояние, и компонент должен обновиться. При переходе к новому маршруту (например, «/ menu2 /») все работает, но при повторном рендеринге мой переход игнорируется.
Единственное решение, которое я увидел, - это изменить DOM с помощью componentDidUpdate, но я не хочу реагировать на непосредственное управление DOM, поэтому мой вопрос:
Как правильно анимировать элементы, используя React вместе с CSS?
Ответы 1
Правильный способ - использовать модификаторы css для применения разных стилей.
Это означает, что ваш код должен выглядеть примерно так:
<ul>
<li className = {`nav-item ${this.state.path== = "/menu1/" ? "nav-item--active" : ""}`}>
menu 1
</li>
<li className = {`nav-item ${this.state.path== = "/menu2/" ? "nav-item--active" : ""}`}>
menu 2
</li>
<li className = {`nav-item ${this.state.path== = "/menu3/" ? "nav-item--active" : ""}`}>
menu 3
</li>
</ul>
Допустим, вам нужен фоновый переход. Вы должны применить стили перехода и исходный цвет фона к классу .nav-item. И после этого вы добавите правило для .nav-item--active, которое просто меняет цвет фона. Думаю, сделав это, вы получите ожидаемый результат.
как я раньше не слышал о модификаторах css, не знаю. В любом случае спасибо ^^ '
Я не понимаю этого ответа, вы делаете то же самое, что и OP, и полностью игнорируете повторный рендеринг компонента, который является корнем его проблемы. Как именно использование стиля БЭМ должно помочь с проблемой повторного рендеринга компонентов, с которой он столкнулся?
Я тоже здесь запутался. эта штука с "модификаторами" просто выдумана, верно? то есть спецификация браузера или CSS ничего об этом не знает, это просто соглашение об именах (БЭМ). Это поведение отличается от исходного сообщения? И почему?
Итак, чтобы было ясно ... модификаторы не являются обязательными для того, чтобы эта работа работала. Это просто хорошая вещь, которую нужно знать и структурировать код. Ключевым моментом здесь было не переключение между двумя классами, а постоянное применение одного, а другого - условного. И да, модификаторы - это просто соглашение, а не то, что браузер интерпретирует по-разному.
Также для @TtotheJ ... мой пример немного отличается. И корень проблемы действительно в повторном рендеринге и в том, как на него реагирует DOM.
Одна вещь, которая сработала для меня, - это использование модификаторов. Так что имейте класс с всегда применяемым переходом и примените класс-модификатор, если он активен.