如何使用 material UI 动画修复 Creative Tim material 设计仪表板图表显示不完整？（成长，滑动等_
How to fix Creative Tim material design dashboard charts incomplete display with material UI animations?(Grow, Slide etc_
如图所示，我遇到了以下问题。创意蒂姆的图表宽度和高度的组件搞砸了。这是因为使用了 material UI 的 Grow Transition。这是第一次使用 transition
加载组件时
First Image
当我再次点击同一个选项卡时，它加载得很好，但是没有过渡，因为组件已经安装，如下图所示
second image
我试过为图表使用固定的宽度和高度，但没有用。
那么如何使用 material UI transitions(Grow,Slide) 完美地处理这张图表而不出现加载问题？
PS：我正在根据创意主题和 material UI 设计自己的动画和过渡界面。它在加载期间在同一页面上使用多个转换。
代码：
import React from "react";
// react plugin for creating charts
import ChartistGraph from "react-chartist";
// @material-ui/core
import { makeStyles } from "@material-ui/core/styles";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import Store from "@material-ui/icons/Store";
import Warning from "@material-ui/icons/Warning";
import DateRange from "@material-ui/icons/DateRange";
import LocalOffer from "@material-ui/icons/LocalOffer";
import Update from "@material-ui/icons/Update";
import ArrowUpward from "@material-ui/icons/ArrowUpward";
import AccessTime from "@material-ui/icons/AccessTime";
import Accessibility from "@material-ui/icons/Accessibility";
import BugReport from "@material-ui/icons/BugReport";
import Code from "@material-ui/icons/Code";
import Cloud from "@material-ui/icons/Cloud";
// core components
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import Table from "components/Table/Table.js";
import Tasks from "components/Tasks/Tasks.js";
import CustomTabs from "components/CustomTabs/CustomTabs.js";
import Danger from "components/Typography/Danger.js";
import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardIcon from "components/Card/CardIcon.js";
import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
import { bugs, website, server } from "variables/general.js";
import {
dailySalesChart,
emailsSubscriptionChart,
completedTasksChart,
} from "variables/charts.js";
import { Grow } from "@material-ui/core";
import styles from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
const useStyles = makeStyles(styles);
export default function ProductsHome(props) {
const classes = useStyles();
return (
<div>
<Grow in={true} timeout={1000}>
<div>
<GridContainer>
<GridItem xs={12} sm={6} md={3}>
<Card>
<CardHeader color="warning" stats icon>
<CardIcon color="warning">
<Icon>content_copy</Icon>
</CardIcon>
<p className={classes.cardCategory}>Used Space</p>
<h3 className={classes.cardTitle}>
49/50 <small>GB</small>
</h3>
</CardHeader>
<CardFooter stats>
<div className={classes.stats}>
<Danger>
<Warning />
</Danger>
<a href="#pablo" onClick={(e) => e.preventDefault()}>
Get more space
</a>
</div>
</CardFooter>
</Card>
</GridItem>
<GridItem xs={12} sm={6} md={3}>
<Card>
<CardHeader color="success" stats icon>
<CardIcon color="success">
<Store />
</CardIcon>
<p className={classes.cardCategory}>Revenue</p>
<h3 className={classes.cardTitle}>,245</h3>
</CardHeader>
<CardFooter stats>
<div className={classes.stats}>
<DateRange />
Last 24 Hours
</div>
</CardFooter>
</Card>
</GridItem>
<GridItem xs={12} sm={6} md={3}>
<Card>
<CardHeader color="danger" stats icon>
<CardIcon color="danger">
<Icon>info_outline</Icon>
</CardIcon>
<p className={classes.cardCategory}>Fixed Issues</p>
<h3 className={classes.cardTitle}>75</h3>
</CardHeader>
<CardFooter stats>
<div className={classes.stats}>
<LocalOffer />
Tracked from Github
</div>
</CardFooter>
</Card>
</GridItem>
<GridItem xs={12} sm={6} md={3}>
<Card>
<CardHeader color="info" stats icon>
<CardIcon color="info">
<Accessibility />
</CardIcon>
<p className={classes.cardCategory}>Followers</p>
<h3 className={classes.cardTitle}>+245</h3>
</CardHeader>
<CardFooter stats>
<div className={classes.stats}>
<Update />
Just Updated
</div>
</CardFooter>
</Card>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={12} md={4}>
<Card chart>
<CardHeader color="success">
<ChartistGraph
className="ct-chart"
data={dailySalesChart.data}
type="Line"
options={dailySalesChart.options}
listener={dailySalesChart.animation}
/>
</CardHeader>
<CardBody>
<h4 className={classes.cardTitle}>Daily Sales</h4>
<p className={classes.cardCategory}>
<span className={classes.successText}>
<ArrowUpward
className={classes.upArrowCardCategory}
/>{" "}
55%
</span>{" "}
increase in today sales.
</p>
</CardBody>
<CardFooter chart>
<div className={classes.stats}>
<AccessTime /> updated 4 minutes ago
</div>
</CardFooter>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<Card chart>
<CardHeader color="warning">
<ChartistGraph
className="ct-chart"
data={emailsSubscriptionChart.data}
type="Bar"
options={emailsSubscriptionChart.options}
responsiveOptions={
emailsSubscriptionChart.responsiveOptions
}
listener={emailsSubscriptionChart.animation}
/>
</CardHeader>
<CardBody>
<h4 className={classes.cardTitle}>Email Subscriptions</h4>
<p className={classes.cardCategory}>
Last Campaign Performance
</p>
</CardBody>
<CardFooter chart>
<div className={classes.stats}>
<AccessTime /> campaign sent 2 days ago
</div>
</CardFooter>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<Card chart>
<CardHeader color="danger">
<ChartistGraph
className="ct-chart"
data={completedTasksChart.data}
type="Line"
options={completedTasksChart.options}
listener={completedTasksChart.animation}
/>
</CardHeader>
<CardBody>
<h4 className={classes.cardTitle}>Completed Tasks</h4>
<p className={classes.cardCategory}>
Last Campaign Performance
</p>
</CardBody>
<CardFooter chart>
<div className={classes.stats}>
<AccessTime /> campaign sent 2 days ago
</div>
</CardFooter>
</Card>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<CustomTabs
title="Tasks:"
headerColor="primary"
tabs={[
{
tabName: "Bugs",
tabIcon: BugReport,
tabContent: (
<Tasks
checkedIndexes={[0, 3]}
tasksIndexes={[0, 1, 2, 3]}
tasks={bugs}
/>
),
},
{
tabName: "Website",
tabIcon: Code,
tabContent: (
<Tasks
checkedIndexes={[0]}
tasksIndexes={[0, 1]}
tasks={website}
/>
),
},
{
tabName: "Server",
tabIcon: Cloud,
tabContent: (
<Tasks
checkedIndexes={[1]}
tasksIndexes={[0, 1, 2]}
tasks={server}
/>
),
},
]}
/>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<Card>
<CardHeader color="warning">
<h4 className={classes.cardTitleWhite}>
Employees Stats
</h4>
<p className={classes.cardCategoryWhite}>
New employees on 15th September, 2016
</p>
</CardHeader>
<CardBody>
<Table
tableHeaderColor="warning"
tableHead={["ID", "Name", "Salary", "Country"]}
tableData={[
["1", "Dakota Rice", ",738", "Niger"],
["2", "Minerva Hooper", ",789", "Curaçao"],
["3", "Sage Rodriguez", ",142", "Netherlands"],
["4", "Philip Chaney", ",735", "Korea, South"],
]}
/>
</CardBody>
</Card>
</GridItem>
</GridContainer>
</div>
</Grow>
</div>
);
}
所以在挣扎了一段时间之后，我从 React-chartlist 转移到 react-chartjs-2，它是用于显示图表的 chartjs 的包装器
如图所示，我遇到了以下问题。创意蒂姆的图表宽度和高度的组件搞砸了。这是因为使用了 material UI 的 Grow Transition。这是第一次使用 transition
加载组件时First Image
当我再次点击同一个选项卡时，它加载得很好，但是没有过渡，因为组件已经安装，如下图所示
second image
我试过为图表使用固定的宽度和高度，但没有用。
那么如何使用 material UI transitions(Grow,Slide) 完美地处理这张图表而不出现加载问题？
PS：我正在根据创意主题和 material UI 设计自己的动画和过渡界面。它在加载期间在同一页面上使用多个转换。
代码：
import React from "react";
// react plugin for creating charts
import ChartistGraph from "react-chartist";
// @material-ui/core
import { makeStyles } from "@material-ui/core/styles";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import Store from "@material-ui/icons/Store";
import Warning from "@material-ui/icons/Warning";
import DateRange from "@material-ui/icons/DateRange";
import LocalOffer from "@material-ui/icons/LocalOffer";
import Update from "@material-ui/icons/Update";
import ArrowUpward from "@material-ui/icons/ArrowUpward";
import AccessTime from "@material-ui/icons/AccessTime";
import Accessibility from "@material-ui/icons/Accessibility";
import BugReport from "@material-ui/icons/BugReport";
import Code from "@material-ui/icons/Code";
import Cloud from "@material-ui/icons/Cloud";
// core components
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import Table from "components/Table/Table.js";
import Tasks from "components/Tasks/Tasks.js";
import CustomTabs from "components/CustomTabs/CustomTabs.js";
import Danger from "components/Typography/Danger.js";
import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardIcon from "components/Card/CardIcon.js";
import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
import { bugs, website, server } from "variables/general.js";
import {
dailySalesChart,
emailsSubscriptionChart,
completedTasksChart,
} from "variables/charts.js";
import { Grow } from "@material-ui/core";
import styles from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
const useStyles = makeStyles(styles);
export default function ProductsHome(props) {
const classes = useStyles();
return (
<div>
<Grow in={true} timeout={1000}>
<div>
<GridContainer>
<GridItem xs={12} sm={6} md={3}>
<Card>
<CardHeader color="warning" stats icon>
<CardIcon color="warning">
<Icon>content_copy</Icon>
</CardIcon>
<p className={classes.cardCategory}>Used Space</p>
<h3 className={classes.cardTitle}>
49/50 <small>GB</small>
</h3>
</CardHeader>
<CardFooter stats>
<div className={classes.stats}>
<Danger>
<Warning />
</Danger>
<a href="#pablo" onClick={(e) => e.preventDefault()}>
Get more space
</a>
</div>
</CardFooter>
</Card>
</GridItem>
<GridItem xs={12} sm={6} md={3}>
<Card>
<CardHeader color="success" stats icon>
<CardIcon color="success">
<Store />
</CardIcon>
<p className={classes.cardCategory}>Revenue</p>
<h3 className={classes.cardTitle}>,245</h3>
</CardHeader>
<CardFooter stats>
<div className={classes.stats}>
<DateRange />
Last 24 Hours
</div>
</CardFooter>
</Card>
</GridItem>
<GridItem xs={12} sm={6} md={3}>
<Card>
<CardHeader color="danger" stats icon>
<CardIcon color="danger">
<Icon>info_outline</Icon>
</CardIcon>
<p className={classes.cardCategory}>Fixed Issues</p>
<h3 className={classes.cardTitle}>75</h3>
</CardHeader>
<CardFooter stats>
<div className={classes.stats}>
<LocalOffer />
Tracked from Github
</div>
</CardFooter>
</Card>
</GridItem>
<GridItem xs={12} sm={6} md={3}>
<Card>
<CardHeader color="info" stats icon>
<CardIcon color="info">
<Accessibility />
</CardIcon>
<p className={classes.cardCategory}>Followers</p>
<h3 className={classes.cardTitle}>+245</h3>
</CardHeader>
<CardFooter stats>
<div className={classes.stats}>
<Update />
Just Updated
</div>
</CardFooter>
</Card>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={12} md={4}>
<Card chart>
<CardHeader color="success">
<ChartistGraph
className="ct-chart"
data={dailySalesChart.data}
type="Line"
options={dailySalesChart.options}
listener={dailySalesChart.animation}
/>
</CardHeader>
<CardBody>
<h4 className={classes.cardTitle}>Daily Sales</h4>
<p className={classes.cardCategory}>
<span className={classes.successText}>
<ArrowUpward
className={classes.upArrowCardCategory}
/>{" "}
55%
</span>{" "}
increase in today sales.
</p>
</CardBody>
<CardFooter chart>
<div className={classes.stats}>
<AccessTime /> updated 4 minutes ago
</div>
</CardFooter>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<Card chart>
<CardHeader color="warning">
<ChartistGraph
className="ct-chart"
data={emailsSubscriptionChart.data}
type="Bar"
options={emailsSubscriptionChart.options}
responsiveOptions={
emailsSubscriptionChart.responsiveOptions
}
listener={emailsSubscriptionChart.animation}
/>
</CardHeader>
<CardBody>
<h4 className={classes.cardTitle}>Email Subscriptions</h4>
<p className={classes.cardCategory}>
Last Campaign Performance
</p>
</CardBody>
<CardFooter chart>
<div className={classes.stats}>
<AccessTime /> campaign sent 2 days ago
</div>
</CardFooter>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<Card chart>
<CardHeader color="danger">
<ChartistGraph
className="ct-chart"
data={completedTasksChart.data}
type="Line"
options={completedTasksChart.options}
listener={completedTasksChart.animation}
/>
</CardHeader>
<CardBody>
<h4 className={classes.cardTitle}>Completed Tasks</h4>
<p className={classes.cardCategory}>
Last Campaign Performance
</p>
</CardBody>
<CardFooter chart>
<div className={classes.stats}>
<AccessTime /> campaign sent 2 days ago
</div>
</CardFooter>
</Card>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<CustomTabs
title="Tasks:"
headerColor="primary"
tabs={[
{
tabName: "Bugs",
tabIcon: BugReport,
tabContent: (
<Tasks
checkedIndexes={[0, 3]}
tasksIndexes={[0, 1, 2, 3]}
tasks={bugs}
/>
),
},
{
tabName: "Website",
tabIcon: Code,
tabContent: (
<Tasks
checkedIndexes={[0]}
tasksIndexes={[0, 1]}
tasks={website}
/>
),
},
{
tabName: "Server",
tabIcon: Cloud,
tabContent: (
<Tasks
checkedIndexes={[1]}
tasksIndexes={[0, 1, 2]}
tasks={server}
/>
),
},
]}
/>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<Card>
<CardHeader color="warning">
<h4 className={classes.cardTitleWhite}>
Employees Stats
</h4>
<p className={classes.cardCategoryWhite}>
New employees on 15th September, 2016
</p>
</CardHeader>
<CardBody>
<Table
tableHeaderColor="warning"
tableHead={["ID", "Name", "Salary", "Country"]}
tableData={[
["1", "Dakota Rice", ",738", "Niger"],
["2", "Minerva Hooper", ",789", "Curaçao"],
["3", "Sage Rodriguez", ",142", "Netherlands"],
["4", "Philip Chaney", ",735", "Korea, South"],
]}
/>
</CardBody>
</Card>
</GridItem>
</GridContainer>
</div>
</Grow>
</div>
);
}
所以在挣扎了一段时间之后，我从 React-chartlist 转移到 react-chartjs-2，它是用于显示图表的 chartjs 的包装器