React CSSTransition не применяет классы правильно - PullRequest
Новая
       27

React CSSTransition не применяет классы правильно

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

Я работаю над приложением карусели, и мне нужно использовать React Transition Group для его анимации.По какой-то причине я не могу заставить классы применяться правильно.

Это смесь проприетарного и открытого кода, поэтому, если этого примера недостаточно, я рад расширить свои примеры.

React render () вызывает это: 

            {this.props.slides.map((slide, index) => (

          <CSSTransition
            key={this.index}
            in={this.appearHome}
            appear={true}
            timeout={600}
            classNames="carouselTransition"
          >

              <CarouselSlide
                key={index}
                index={index}
                activeIndex={this.state.activeIndex}
                slide={slide}
              />

          </CSSTransition>

        ))}

И тогда CSS выглядит так: 

    /* appear on page load */
.carouselTransition-appear {
  opacity: 0;
  z-index: 1;
}

.carouselTransition-appear.carouselTransition-appear-active {
  opacity: 1;
  transition: opacity 600ms linear;
}

.carouselTransition-enter {
  opacity: 0;
  z-index: 1;
}

.carouselTransition-enter.CarouselTransition-enter-active {
  opacity: 1;
  transition: opacity 300ms linear;
}

.carouselTransition-exit {
  opacity: 1;
}

.carouselTransition-exit.carouselTransition-exit-active {
  opacity: 0;
  transition: opacity 300ms linear;
}

.carouselTransition-exit-done {
  opacity: 0;
}

Применяется appear CSS, но когда я циклическиКарусель Я вижу, как классы enter и exit выпадают из div'ов и никогда не возвращаются.Я подозреваю, что я делаю что-то не так с key={index}, который я прочитал, является антипаттерном, но я не уверен, как это исправить.

Опять же, если требуется больше кода, произнесите слово!

1 Ответ

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

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

.carouselTransition-appear {
  opacity: 1;
}

.carouselTransition-appear.carouselTransition-appear-active {

}

.carouselTransition-enter {
  transform: translateX(110%);
}

.carouselTransition-enter.carouselTransition-enter-active {
  transition: transform 600ms ease-in-out;
  transform: translateX(0);
}

.carouselTransition-enter.carouselTransition-enter-done {
}

.carouselTransition-exit {
  transform: translateX(0);
}

.carouselTransition-exit.carouselTransition-exit-active {
  transition: transform 600ms ease-in-out;
  transform: translateX(-100%);
}

.carouselTransition-exit-done {
  left: -10000px;
  opacity: 0;
  height: 0px;
}
...