Есть ли способ динамически добавлять анимацию в разделы компонента React? - PullRequest
Новая
       22

Есть ли способ динамически добавлять анимацию в разделы компонента React?

0 голосов
/ 15 апреля 2020

Итак, я динамически создаю страницы с моим маршрутом, который выглядит следующим образом. Который отображает страницы компонентов из файла JSON. 

const Writer = ({match: {url}, coreTopics}) => {
    return (
        <React.Fragment>
            <Route path = {`${url}/:topicId`} render = {
                ({ match }) => 
                <TopicHeaderCard {...coreTopics.find(topic => topic.id === match.params.topicId)}/>}
            />
        </React.Fragment>
    )
}

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

// I want to animate this section of my page each time new content is shown.
            <ImageTextContainer>
                <H1> {this.props.name} </H1>
                <Stripe stripeColour = {this.props.headerColour}/>
                <p> {this.props.description} </p>
            </ImageTextContainer>

Затем у меня есть приложение. js, куда все направляется. 

     <Router>
       <ScrollToTop>
          <NavBar/>
            <div className = "content">
              <Switch>
                <Route path = "/core-topics" render = { 
                  props =>  
                    <Header 
                      {...props} 
                      coreTopics = {coreTopics}
                      />
                  }/>
                <Route exact path = "/" component = {Home}/>
              </Switch>
            </div>
         </ScrollToTop>
      </Router>

Так есть ли способ динамической анимации каждого из этих компонентов страницы? чтобы казалось, что страницы обновляются, когда пользователь приземляется?

...