CSS Transitions in React - исчезновение текста, когда пользователь нажимает кнопку - PullRequest
Новая
       7

CSS Transitions in React - исчезновение текста, когда пользователь нажимает кнопку

0 голосов
/ 02 октября 2018

У меня есть следующий презентационный компонент: 

const HowToControls = props => {
  return (
    <div className="col-md-6 how-to">
      {props.isOpen ?
        <p className={`text ${props.isOpen ? 'visible' : ''}`}>
         lorem ipsum............
        </p>/>
        : null}
    </div>
  );
}

У абзаца есть класс с именем "text", и второй класс добавляется условно, если нажата кнопка в его родительском компоненте.Текст переключается, инспектор показывает, что оба класса («текст» и «видимый») добавляются к элементу, но эффект перехода отсутствует.Вот мой CSS: 

.text {
  opacity: 0.01;
  transition: opacity 600ms;
}

.text.visible {
  opacity: 1;
}

Я предполагаю, что оба класса добавляются при загрузке страницы (до монтирования компонента).Это верно?Любая помощь будет оценена.

1 Ответ

0 голосов
/ 02 октября 2018

Перед абзацем есть оператор if props.isOpen.Так что технически это не имеет значения по поводу смены класса.Основываясь на props.isOpen, он будет либо показывать абзац с включенным видимым классом, либо показывать null.Попробуйте вместо этого: 

<div className="col-md-6 how-to">
    <p className={`text ${props.isOpen ? 'visible' : ''}`}>
     lorem ipsum............
    </p>/>
</div>

Чтобы перейти к работе, сначала он должен быть в DOM с исходным свойством CSS, а когда это свойство изменяется или переопределяется, оно запускает ваш переход.В вашем случае вы, по сути, даже не воспроизводите абзац из-за наличия этого условия перед абзацем.

...