реагирующая переходная группа не монтируется в т.е 11 - PullRequest
Новая
       21

реагирующая переходная группа не монтируется в т.е 11

0 голосов
/ 12 марта 2019

Я использую реагирующую группу перехода, чтобы применить постепенный переход при загрузке страницы. К сожалению, переход не монтируется в 11 (сюрприз) Есть ли там, чтобы скрыть реактивные компоненты от? 

<Route render={({ location }) => (
                            <div>
                                <Nav />
                                <TransitionGroup>
                                    <CSSTransition
                                        key={location.key}
                                        timeout={700}
                                        classNames='fade'
                                    >
                                        <Switch location={location}>
                                            <Route exact path='/' component={Home} />
                                            <Route exact path='/skills' component={Skills} />
                                            <Route exact path='/work-history' component={WorkHistory} />
                                            <Route exact path='/projects' component={Projects} />
                                            <Route exact path='/contact' render={(props) => (
                                                <Contact {...props} onSubmit={fields => this.onSubmit(fields)}/>
                                            )}  />
                                        </Switch>
                                    </CSSTransition>
                                </TransitionGroup>
                                <Footer />
                            </div>
                        )} />
                    </ScrollToTop>
                </Router>

мой css: 

.fade-enter {
  opacity: 0;
  z-index: 1;
  transition: opacity 700ms ease-in;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 700ms ease-in;
}

Редактировать: Решение (ниже)

обновил мой переход css: 

.fade-enter {
  opacity: 0;
  z-index: 1;
  transition: opacity 700ms ease-in;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 700ms ease-in;
}

.fade {
  opacity: 0;
  transition: opacity 4s linear;
}
.fade.in {
  opacity: 1;
}

Группа переходов app.js css change change: 

<TransitionGroup>
   <CSSTransition
       key={location.key}
       appear={true}
       classNames='fade'
       timeout={700}
              >

Я также удалил Object.is (); синтаксис всех моих файлов JS, так как ie11 не понимает, вместо этого я использую операторы if.

...