Question

我在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 && (
            <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>
  );
}

Answer 1

没关系。我不小心在Step上放了一个随机的UUID键，这导致步进器在没有动画的情况下跳到了下一步。

#reactprobs

材质UI步进器不进行动画处理

1 个答案: