Question

我有一个progressBar组件。尽管将initialAnimation设置为true，初始动画仍无法工作。我想念什么？是否有需要解决的其他CSS？我只希望图表上的initialAnimation和数字无需更改

import React from 'react'
import CircularProgressbar from 'react-circular-progressbar'
import { withStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import PropTypes from 'prop-types'

const styles = theme => ({
    progressBar: {
      width: '80px',
      margin: 'auto',
      marginTop: theme.spacing.unit + 4,
      marginBottom: theme.spacing.unit + 4,
      position: 'relative'
    },
    text: {
        position: 'absolute',
        top: 20,
        left: 5,
        paddingRight: '5px' 
    }
  });

function StyledProgressbar(props) {
  const { classes, palette } = props;
  return (
    <div className={classes.progressBar}>
      <Typography variant="caption" align='center' className={classes.text}>
        {props.percentage}% complete
      </Typography>
      <CircularProgressbar
        percentage={props.percentage}
        strokeWidth={10}
        initialAnimation={true}
        styles={{
        path: {
            stroke: palette.secondary.main,
            strokeLinecap: 'round',
            transition: 'stroke-dashoffset 0.5s ease 0s',
        },
        trail: {
            stroke: palette.secondary.light,
            strokeLinecap: 'round',
        }
        }}>
      </CircularProgressbar>
    </div>
  );
}

StyledProgressbar.propTypes = {
  classes: PropTypes.object,
  percentage: PropTypes.number,
  palette: PropTypes.object
}

export default withStyles(styles)(StyledProgressbar);

Answer 1

您只需要更改此内容即可

import CircularProgressbar from 'react-circular-progressbar';

从这里：

import { CircularProgressbar } from 'react-circular-progressbar';

有关更多信息，standalone package

React-circular-progressBar没有显示initialAnimation

1 个答案: