如何在React中设置样式组件的过渡持续时间

Question

我正在尝试在React中创建自己的滑块，并且过渡持续时间遇到问题。我无法设置。

这是我到目前为止尝试过的。

import React, { Component } from "react";
import Slide from "./Slide";
import slide0 from "../../assets/images/sky.jpg";
import slide1 from "../../assets/images/3monkeys.jpg";
import slide2 from "../../assets/images/tree.jpg";
import slide3 from "../../assets/images/moon.jpg";
import slide4 from "../../assets/images/woman.jpg";
import slide5 from "../../assets/images/railways.jpg";
import classes from "./Slider.scss";
import styled from "styled-components";

class Slider extends Component {
  state = {
    position: -26
  };

  narrowRight() {
    this.setState({
      position: this.state.position - 13
    });
  }
  narrowLeft() {
    this.setState({ position: this.state.position + 13 });
  }

  render() {
    const Wrapper = styled.div`
      width: 100%;
      height: 100%;
      display: flex;
      overflow: hidden;
    `;
    const Slidest = styled.div`
      display: flex;
      transition: transform 1s ease;
      transform: translateX(${this.state.position}%);
    `;
    return (
      <div>
        <Wrapper>
          <Slidest className={classes.Slider}>
            <Slide source={slide0} alt={"sky"} />
            <Slide source={slide1} alt={"s"} />
            <Slide source={slide2} alt={"sk"} />
            <Slide source={slide3} alt={"skys"} />
            <Slide source={slide4} alt={"skyss"} />
            <Slide source={slide5} alt={"skysss"} />
          </Slidest>
        </Wrapper>
        <div className={classes.Slider}>
          <i
            onClick={() => this.narrowLeft()}
            className="fas fa-5x fa-chevron-circle-left"
          />
          <i
            onClick={() => this.narrowRight()}
            className="fas fa-5x fa-chevron-circle-right"
          />
        </div>
      </div>
    );
  }
}

export default Slider;