4 replies

React-Transition-Group

Hi! I've been struggling a lot with

react-transition-group

react-transition-group

and I'm wondering if there's anything obvious I'm missing. I've been following the examples presented here https://reactcommunity.org/react-transition-group/transition-group

My page has a 3-tab layout which is switched using the icons at the top of the page. I then use a state enum

activeView

activeView

to switch between the views using the following code:

<div className="flex grow flex-col items-center">
  <TransitionGroup className="panels" component={null}>
    {
      {
        weight: (
          <CSSTransition ref={weightRef} timeout={500} classNames="view-panel">
            <WeightView nodeRef={weightRef}/>
          </CSSTransition>
        ),
        workout: (
          <CSSTransition ref={workoutRef} timeout={500} classNames="view-panel">
        <WorkoutView nodeRef={workoutRef}/>
          </CSSTransition>
        ),
        nutrition: (
          <CSSTransition ref={nutritionRef} timeout={500} classNames="view-panel">
        <NutritionView nodeRef={nutritionRef} />
          </CSSTransition>
        ),
      }[activeView]
    }
  </TransitionGroup>
</div>

<div className="flex grow flex-col items-center">
  <TransitionGroup className="panels" component={null}>
    {
      {
        weight: (
          <CSSTransition ref={weightRef} timeout={500} classNames="view-panel">
            <WeightView nodeRef={weightRef}/>
          </CSSTransition>
        ),
        workout: (
          <CSSTransition ref={workoutRef} timeout={500} classNames="view-panel">
        <WorkoutView nodeRef={workoutRef}/>
          </CSSTransition>
        ),
        nutrition: (
          <CSSTransition ref={nutritionRef} timeout={500} classNames="view-panel">
        <NutritionView nodeRef={nutritionRef} />
          </CSSTransition>
        ),
      }[activeView]
    }
  </TransitionGroup>
</div>

Additionally I have some CSS containing the transitions but I don't think that is relevant to my problem.

As I've understood it,

TransitionGroup

TransitionGroup

combined with

CSSTransition

CSSTransition

should apply classes to my

WeightView, WorkoutView

WeightView, WorkoutView

and

NutritionView

NutritionView

components, no such classes are ever applied in the browser.

Have I overlooked something obvious? Does my object indexing control flow not cause the components to mount and unmount? I can't see how that wouldn't be the case.

React-Transition-Group

Hi! I've been struggling a lot with

react-transition-group

react-transition-group

activeView

activeView

to switch between the views using the following code:

<div className="flex grow flex-col items-center">
  <TransitionGroup className="panels" component={null}>
    {
      {
        weight: (
          <CSSTransition ref={weightRef} timeout={500} classNames="view-panel">
            <WeightView nodeRef={weightRef}/>
          </CSSTransition>
        ),
        workout: (
          <CSSTransition ref={workoutRef} timeout={500} classNames="view-panel">
        <WorkoutView nodeRef={workoutRef}/>
          </CSSTransition>
        ),
        nutrition: (
          <CSSTransition ref={nutritionRef} timeout={500} classNames="view-panel">
        <NutritionView nodeRef={nutritionRef} />
          </CSSTransition>
        ),
      }[activeView]
    }
  </TransitionGroup>
</div>

<div className="flex grow flex-col items-center">
  <TransitionGroup className="panels" component={null}>
    {
      {
        weight: (
          <CSSTransition ref={weightRef} timeout={500} classNames="view-panel">
            <WeightView nodeRef={weightRef}/>
          </CSSTransition>
        ),
        workout: (
          <CSSTransition ref={workoutRef} timeout={500} classNames="view-panel">
        <WorkoutView nodeRef={workoutRef}/>
          </CSSTransition>
        ),
        nutrition: (
          <CSSTransition ref={nutritionRef} timeout={500} classNames="view-panel">
        <NutritionView nodeRef={nutritionRef} />
          </CSSTransition>
        ),
      }[activeView]
    }
  </TransitionGroup>
</div>

Additionally I have some CSS containing the transitions but I don't think that is relevant to my problem.

As I've understood it,

TransitionGroup

TransitionGroup

combined with

CSSTransition

CSSTransition

should apply classes to my

WeightView, WorkoutView

WeightView, WorkoutView

and

NutritionView

NutritionView

React-Transition-Group

React-Transition-Group

Similar Threads

Similar Threads

Similar Threads