Эффект перехода при отображении элементов в React.JS

avatar
user12584812
9 августа 2021 в 07:08
100
1
0

Как получить эффект перехода при отображении таких элементов, как: На основе http://reactcommunity.org/react-transition-group/css-transition Я хотел бы, чтобы каждая карта элемента имела непрозрачность 0, а в течение 1 с непрозрачность увеличивалась до 1. Я создал что-то, как показано ниже, однако никаких эффектов не появилось.

{ask.map((item, index) => {
          return (
            <CSSTransition 
            in={true}
            timeout={500}
            classNames="fade"
            >
            <tr>
              <td>{item.ra}</td>
              <td>{item.ca}</td>
              <td>{(item.ra*item.ca).toFixed(2)}</td>
            </tr>
            </CSSTransition >
            
          )
          })}

CSS:

.fade {
  opacity: 0 ;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 500ms;
}
Источник

Ответы (1)

avatar
jACK
9 августа 2021 в 08:50
0

Если я правильно понял, вы хотите добавить эффект затухания на карту. В моей песочнице кода вы найдете рабочий пример эффекта затухания на карте.

Рабочие коды и песочница

Надеюсь, это то, что вы ищете.

user12584812
9 августа 2021 в 09:17
0

Да, вы мне очень помогли :) Кстати, вы знаете, как я могу получить эффект анимации, когда я изменяю локальное состояние элементов отображения?

user12584812
9 августа 2021 в 09:56
0

Я нашел ответ здесь coderhelper.com/questions/63336467/…