Question

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

我有一个Slider（Material-UI），我想为值更改制作动画。现在，当我单击按钮滑块时，立即更改值：

这是我的代码：

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;
}

此分叉链接也显示更改 https://codesandbox.io/s/material-slider-demo-with-animation-45rei

Answer 2

您可以使用CSS过渡来实现动画：

  /* Adds CSS3 animation */
  .MuiSlider-thumb {
    transition: left 0.5s;
  }

  /* This is needed. Without it drag and drop with a mouse looks very weird */
  .MuiSlider-thumb.MuiSlider-active {
    transition: left 0s;
  }

  /* Animating track with CSS3 as well */
  .MuiSlider-track {
    transition: width 0.5s;
  }

此方法的唯一问题是：材质的Slider不会像拇指一样用active类标记轨道。因此，在直接使用鼠标更改滑块的值时，轨迹更改会稍有延迟。

React Material-UI动画滑块值更改

2 个答案: