Блог

У меня есть вертикальный степпер, который я использую в Material UI для отображения калькулятора цен. Анимация больше не работает. Ранее степпер анимировал эффект свертывания при изменении шагов.

Я подозреваю, что это может быть связано с вложенностью нескольких переходов, но я не совсем уверен.

Соответствующий метод рендеринга для калькулятора приведен ниже. Спасибо!

 return (
    <Grid container>
      <Grid item xs={12} sm={12} md={8} className="nocPricingCalculatorContainer">
      <Collapse in={activeStep < 2}>
          <Stepper elevation={0} activeStep={activeStep} className="nocPricingCalculatorStepper" connector={<StepConnector classes={{ line: classes.stepConnector }} />} orientation="vertical">
            {steps.map((stepObj, index) => {
              return (
                <Step key={uuidv4()}>
                  <StepLabel classes={{ label: classes.stepLabel }} StepIconProps={{
                    classes: { text: classes.stepLabelText }
                  }}>{stepObj.label}</StepLabel>
                  <StepContent className={classes.stepContentBorder}>
                    <div className={classes.actionsContainer}>
                      <Grid container item xs={12}>
                        {getStepContent(index)}
                      </Grid>
                      <div>
                        {
                          (activeStep !== 0) ?
                            <Button
                              className="nocButtonClear"
                              onClick={handleBack}>
                              Back
                    </Button> :
                            <div></div>
                        }

                        <Button
                          variant="contained"
                          onClick={handleNext}
                          className="nocButtonYellow"
                          disableRipple
                        >
                          {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                        </Button>
                      </div>
                    </div>
                  </StepContent>
                </Step>
              )
            })}
          </Stepper>
        </Collapse>
        <Collapse in={activeStep >= 2}>
          {activeStep === steps.length amp;amp; (
            <Grid item container className="nocPricingCalculatorFinalStep" alignItems="center" justify="center">
              <Grid item container xs={12} justify="center" className="nocPricingCalculatorResetArea">
                <Grid item>
                  <Button className="nocButtonClear nocPricingCalculatorResetButton" disableRipple onClick={handleReset}>
                    <RefreshIcon className="nocResetIcon" />Reset calculator
                  </Button>
                </Grid>
              </Grid>
              <Grid item container xs={12} justify="center" className="nocPricingCalculatorPriceArea">
                <Grid item container alignItems="center" justify="center" xs={12} className="nocPriceColumnLabel">
                  <CheckCircle className="nocPriceAreaCheckIcon" />
                  <Typography className="nocPricingCalculatorPricingHeader">
                    {pricingSectionTitle}
                  </Typography>
                </Grid>
                <Grid item container className="nocPricingCalculatorPriceColumn left" alignItems="center" justify="center" xs={12} sm={12} md={6}>

                  <Grid item xs={12}>
                    <Typography className="nocPricingCalculatorPricingRepairType">
                      {pricingColumnLeft.title}
                    </Typography>
                    <Typography className="nocPricingCalculatorPricingPrice">
                      {pricingColumnLeft.price}
                    </Typography>
                  </Grid>
                  <Grid item>
                    <List dense={true}>
                      {generateRenderableList(pricingColumnLeft.details)}
                    </List>
                  </Grid>
                </Grid>
                <Grid item container className="nocPricingCalculatorPriceColumn right" alignItems="center" justify="center" xs={12} sm={12} md={6}>
                  <Grid item xs={12}>
                    <Typography className="nocPricingCalculatorPricingRepairType">
                      {pricingColumnRight.title}
                    </Typography>
                    <Typography className="nocPricingCalculatorPricingPrice">
                      {pricingColumnRight.price}
                    </Typography>
                  </Grid>
                  <Grid item>
                    <List dense={true}>
                      {generateRenderableList(pricingColumnRight.details)}
                    </List>
                  </Grid>
                </Grid>
              </Grid>

            </Grid>
          )}
      </Collapse>
      </Grid>
    </Grid>
  );
}
  

Неважно. Я случайно поместил случайный ключ UUID на шаг, и это заставило шаговый переход перейти к следующему шагу без анимации.

#reactprobs