React-round-progressBar не показывает исходную анимацию - PullRequest
Новая
       35

React-round-progressBar не показывает исходную анимацию

0 голосов
/ 13 июня 2019

У меня есть компонент progressBar. Начальная анимация отказывается работать, несмотря на установку initialAnimation в значение true. Что мне не хватает? Нужен ли какой-нибудь дополнительный CSS, чтобы это исправить? Я просто хочу, чтобы начальная анимация на графике и число не нужно менять 

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);
...