Не удается воспроизвести эффект постепенного появления в React

Question

Я хочу воспроизвести эффект, который я кодировал в этом ванильном примере JS в моем приложении React.

Это мой Sass

.item
    opacity: 0
    transition-property: opacity
    transition-timing-function: ease-in

.is-transitioning
    opacity: 1

цикл, генерирующийизображения и их контейнеры:

this.props.images.map((image, index) => <ImageContainer key={`img-${index}`} 
      image={image} 
      transitionDuration={Math.trunc(index * Math.random() * 1000) + 200} />
)

и, наконец, компонент ImageContainer:

    const ImageContainer = (props) => (

        <div className="item is-transitioning"
            style={{ transitionDuration: `${props.transitionDuration}ms` }}
        >
            <img src={`${props.image.path}`} />
        </div>
    );

     export default ImageContainer;

Несмотря на то, что встроенный класс правильно применен, а CSS есть, я не могу понять, почемуэффект не проявляется

Answer 1

(Как сказано в другом ответе на эту тему:) Проблема в том, что CSS (классы) не изменились, поэтому переход "не нужен", не вызывая анимацию.

Для людей из Reactкто хочет использовать переход поверх анимации или других библиотек, вот «рабочая» скрипка с пакостным хаком : https://jsfiddle.net/s16nd2j5/

Хитрость заключается в добавлении класса в <ImageContainer> вcomponentDidMount() с setTimeout для 0ms .

setTimeout( _ => this.setState({ transitioning: true }), 0);

Этот тип принудительно переносит обновление состояния на другой рендер, в результате чего «изменение класса CSS» принимаетместо.

PS это взломать.Код пахнет, когда используется setTimeout / setInterval, как это.

PPS Часть shuffle() из скрипки OP опущена для простоты.

Answer 2

Проблема в том, что is-transitioning добавляется с самого начала, поэтому ваши элементы уже на opacity:1, и notihng произойдет.Вам нужно добавить класс, чтобы вызвать изменение непрозрачности и увидеть переход.

Другой способ, если вы не можете добавить класс, это использовать анимацию.Вот пример JS, который вы можете преобразовать в реакцию:

Array.from(document.querySelectorAll('.item')).map((i, index) => {
  i.style.animationDuration = `${(index * Math.trunc(Math.random() * 1000)) + 200}ms`;
});

.container {
  display: flex;
}

.item {
  display: flex;
  justify-content:center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  background-color: teal;
  padding: 2rem;
  margin-right: 1.2rem;
  border-radius: 10px;
  font-size: 2rem;
  color: white;
  opacity: 0;
  animation:change 2s forwards;
}
@keyframes change{
  to {
   opacity:1;
  }
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Просто сохраните тот же код, который вы написали, замените transitionDuration на animationDuration и настройте CSS.