ReactJs - CSSAnimation не работает - PullRequest
Новая
       7

ReactJs - CSSAnimation не работает

0 голосов
/ 27 апреля 2018

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

Код 

import { CSSTransition, TransitionGroup } from "react-transition-group";
return (
      <TransitionGroup component="ul" className="venue-list">
        {searchVenues.map(item => (
          <CSSTransition
                key={item.venue.id}
                timeout={500}
                classNames="fade"
              >
          <li className="venue-list__item">
            <Link
              to={`/venues/${item.venue.id}`}
              className="venue-list__itemLink"
            >
              <div className="venue-list__cover" />
              <img
                src={`${item.venue.photos.groups[0].items[0].prefix}128${item.venue.photos.groups[0].items[0].suffix}`}
                alt="Venue Best Img"
                className="venue-list__image"
              />
              <div className="venue-list__onTopData">
                <h3 className="venue-list__venue-name">{item.venue.name}</h3>
                <div className="venue-list__venueInfo">
                  <div className="venue-list__userWrapper">
                    <div className="left">
                      <img src="/image/user-icon.png" alt="Icon" />
                    </div>
                    <div className="right">
                      <span className="user-text">{item.venue.stats.tipCount}</span>
                    </div>
                  </div>
                  <div className="venue-list__tagWrapper">
                    <div className="left">
                      <img src="/image/tag-icon.png" alt="Icon" />
                    </div>
                    <div className="right">
                      <ProgressBar price={ item.venue.price.tier } />
                    </div>
                  </div>
                  <div className="venue-list__ratingWrapper">
                    <img src="/image/triangle.png" alt="icon" />
                    <span className="rating-text">{item.venue.rating}</span>
                  </div>
                </div>
              </div>
            </Link>
          </li>
          </CSSTransition>
        ))}
      </TransitionGroup>
  );
};

CSS 

.fade-enter {
  opacity: 0.01;
  transform: translate(-100%);
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 1500ms ease-in;
  transform: translate(0);
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0.01;
  transform: translate(-100%);
  transition: opacity 1500ms ease-in;
}

Я использую CSSTransitiongroup. но по какой-то причине это не работает. Я просто хочу, чтобы анимация происходила во время первого монтирования. Я не знаю, что происходит не так. Любая помощь будет оценена.

1 Ответ

0 голосов
/ 27 апреля 2018

Я думаю, что вам не хватает .fade-appear и .fade-appear-active в вашем CSS, обычно они идентичны .fade-enter и .fade-enter-active с точки зрения того, какой CSS они должны иметь. Кроме того, время ожидания должно соответствовать длительности CSS.

Возможно, вы захотите взглянуть на react-animated-transitions, который предлагает абстракцию поверх react-transition-group.

...