Question

我有这一系列的盒子，它们是连续排列的，每个盒子都有它的价值和背景色。最终，盒子改变了位置，我想为其设置动画。

这是我能够做到的下面的代码或（CodePen），虽然很好，但是当我再添加5个框（需要有6个框）时，动画（过渡），有时只需跳过自身，然后将框弹出到该位置you can see that here。

function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

const BOX_COLOR = {
  1: "red",
  2: "blue",
  3: "green",
  4: "black",
  5: "orange",
  6: "yellow"
};


class App extends React.Component {
  state = {
    value: [1]
  }

  componentDidMount = () => {                 
    setInterval(() => {
      let newArr = shuffle(this.state.value)
      this.setState({ value: newArr})
    }, 2000);
  }
  
  render() {
     let order = this.state.value.map((BoxValue, BoxOrder) => { // BoxOrder is position of the box
      let classColor = BOX_COLOR[BoxValue]; // because each number has different color
      let classOrder = null; // and this should dictate on what position should that box be
      let randomPosition = Math.floor(Math.random() * 6) + 1 // generate random box position 
      switch (randomPosition) {
        case 1:
          classOrder = "first";
          break;
        case 2:
          classOrder = "second";
          break;
        case 3:
          classOrder = "third";
          break;
        case 4:
          classOrder = "fourth";
          break;
        case 5:
          classOrder = "fifth";
          break;
        case 6:
          classOrder = "sixth";
          break;
        default:
          break;
      }
      return (
        <div key={BoxValue} className={["box", classColor, classOrder].join(" ")}>
          {BoxValue}
        </div>
      );
    });
    return (
    <div className="container">
       {order} 
    </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

.container {
  border: 5px solid #666;
  height: 100px;
  width: 600px;
  display: flex;
  position: relative;
}

.box {
  border: 5px solid #999;
  background: red;
  width: 100px;
  height: 100%;
  padding: 20px;
  font-size: 50px;
  text-align: center;
  color: white;
  position: absolute;
  transition: transform 700ms ease-in-out;
  left: 0;
  top: 0;
  box-sizing: border-box;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

.black {
  background: black;
}

.orange {
  background: orange;
}

.yellow {
  background: yellow;
}

.first {
  transform: translateX(0);
}

.second {
  transform: translateX(100px);
}

.third {
  transform: translateX(200px);
}

.fourth {
  transform: translateX(300px);
}

.fifth {
  transform: translateX(400px);
}

.sixth {
  transform: translateX(500px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app">
</div>

您怎么看，这是什么问题，我只想让动画像只有一个盒子一样平滑？

Answer 1

我认为您使用BoxValue作为BoxOrder，反之亦然。只需将它们切换到在render方法中使用过的位置即可。将BoxValue替换为BoxOrder + 1，并将BoxOrder + 1替换为BoxValue。（我想在3个地方添加评论）

请参见下面的代码段

function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

const BOX_COLOR = {
  1: "red",
  2: "blue",
  3: "green",
  4: "black",
  5: "orange",
  6: "yellow"
};


class App extends React.Component {
  state = {
    value: [1, 2, 3, 4, 5, 6]
  }

  componentDidMount = () => {                 
    setInterval(() => {
      let newArr = shuffle(this.state.value)
      this.setState({ value: newArr})
    }, 2000);
  }
  
  render() {
     let order = this.state.value.map((BoxValue, BoxOrder) => { // BoxOrder is position of the box
      let classColor = BOX_COLOR[BoxOrder+1]; // because each number has different color
//CHANGED BoxValue TO BoxOrder+1
      let classOrder = null; // and this should dictate on what position should that box be
      let randomPosition = Math.floor(Math.random() * 6) + 1 // generate random box position 
      switch (BoxValue) {//CHANGED BoxOrder+1 TO BoxValue
        case 1:
          classOrder = "first";
          break;
        case 2:
          classOrder = "second";
          break;
        case 3:
          classOrder = "third";
          break;
        case 4:
          classOrder = "fourth";
          break;
        case 5:
          classOrder = "fifth";
          break;
        case 6:
          classOrder = "sixth";
          break;
        default:
          break;
      }
      return (
        <div key={BoxOrder +1} className={["box", classColor, classOrder].join(" ")}>
          {BoxOrder +1}
        </div>
      );
      //CHANGED BoxValue TO BoxOrder+1 
    });
    return (
    <div className="container">
       {order} 
    </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

.container {
  border: 5px solid #666;
  height: 100px;
  width: 600px;
  display: flex;
  position: relative;
}

.box {
  border: 5px solid #999;
  background: red;
  width: 100px;
  height: 100%;
  padding: 20px;
  font-size: 50px;
  text-align: center;
  color: white;
  position: absolute;
  transition: transform 700ms ease-in-out;
  left: 0;
  top: 0;
  box-sizing: border-box;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

.black {
  background: black;
}

.orange {
  background: orange;
}

.yellow {
  background: yellow;
}

.first {
  transform: translateX(0);
}

.second {
  transform: translateX(100px);
}

.third {
  transform: translateX(200px);
}

.fourth {
  transform: translateX(300px);
}

.fifth {
  transform: translateX(400px);
}

.sixth {
  transform: translateX(500px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app">
</div>

您也可以here对其进行测试

盒顺序动画

1 个答案: