javascript - React Material-UI 动画 slider 值变化

Question

我刚刚开始学习 React，并且已经发现了我的第一个问题，我正在尝试修复几个小时。

我有一个 slider (Material-UI)，我想用动画显示值的变化。现在，当我单击按钮 slider 时，值会立即更改:

这是我的代码:

import React from "react";
import Typography from "@material-ui/core/Typography";
import Slider from "@material-ui/core/Slider";
import Button from "@material-ui/core/Button";

class DiscreteSlider extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 20
    };
  }

  updateValue = (event, newValue) => {
    //console.log(newValue);
    this.setState({ value: newValue });
  };

  render() {
    return (
      <div>
        <Typography id="discrete-slider" gutterBottom>
          Temperature
        </Typography>
        <Slider
          value={this.state.value}
          valueLabelDisplay="auto"
          step={1}
          min={0}
          max={100}
          onChange={this.updateValue}
        />
        <Button
          variant="contained"
          color="primary"
          onClick={() => {
            this.setState({ value: 90 });
          }}
        >
          Set to 90
        </Button>
        <Button
          variant="contained"
          color="secondary"
          onClick={() => {
            this.setState({ value: 10 });
          }}
        >
          Set to 10
        </Button>
      </div>
    );
  }
}

export default DiscreteSlider;

这是一个在线演示:https://codesandbox.io/s/material-demo-6z971

如何为值变化设置动画(补间)？理想情况下，我希望在当前值和目标值之间实现平滑过渡，类似于:http://jsfiddle.net/wkQ8y/8/

Answer 1

您可以通过 Slider Thumb 上的简单 CSS 属性来实现此目的。由于该库内部不提供任何动画功能，因此我们可以利用不断变化的 CSS 属性来制作动画。

拇指通过更改 left 属性来更改其位置。让我们尝试对此进行动画处理并查看。添加以下 css 代码并尝试一下

.MuiSlider-thumb:not(.MuiSlider-active) {
  transition: left 1s ease-in;
}

.MuiSlider-track {
  transition: width 1s ease-in;
}

此 fork 链接还显示了更改 https://codesandbox.io/s/material-slider-demo-with-animation-45rei