Question

我有一个tic tac toe board，并希望在点击上添加一个元素的过渡。对于演示，我有一块充满了一些单元格的电路板。点击电路板后，将填充一个新电池。我希望这个新细胞能够实现转变。

我已经关注了React Transition Group doc。单击电路板的任何单元格，第2行第3列将出现一个圆圈。这应该与淡入转换一起显示。我添加了CSSTransition组，但转换没有发生。有点不对劲。

以下是codesandbox：

摘录中的一些示例代码

井字棋-board.js

import React from "react";
import "./tictactoe.css";

import { CSSTransition } from 'react-transition-group';

const Fade = ({ children, ...props }) => (
  <CSSTransition {...props} timeout={1000} classNames="fade">
    {children}
  </CSSTransition>
);

class TicTacToeBoard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      board: [
        [0, 1, 0],
        [2, 0, 0],
        [0, 0, 0]
      ]
    };
  }

  handleBoardClick = () => {
    let newBoard = [
      [...this.state.board[0]],
      [...this.state.board[1]],
      [...this.state.board[2]]
    ];
    newBoard[1][2] = 1;
    this.setState({board: newBoard});
  }

  render() {
    return (
      <div className="board" onClick={this.handleBoardClick}>
        {this.state.board.map((row, rowIndex) =>
          row.map((cell, colIndex) => {
            return (
              <div className="cell" key={`${rowIndex}-${colIndex}`}>
                {cell === 1 && (
                  <Fade in={true}>
                    <img
                      src="https://image.ibb.co/nDDDuw/circle_outline.png"
                      alt=""
                      className="cell-content"
                    />
                  </Fade>
                )}
                {cell === 2 && (
                  <Fade in={true}>
                    <img
                      src="https://image.ibb.co/jY0nMb/close.png"
                      alt=""
                      className="cell-content"
                    />
                  </Fade>
                )}
              </div>
            );
          })
        )}
      </div>
    );
  }
}

export default TicTacToeBoard;

tictactoe.css

* {
  box-sizing: border-box;
}

.board {
  width: 90vmin;
  height: 90vmin;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 5px 5px 10px #aaa;
}

.cell {
  width: 30vmin;
  height: 30vmin;
  border: 1px solid lightgrey;
}

.cell-content {
  width: 80%;
  height: 80%;
  margin: 10%;
}

.fade-enter {
  opacity: 0.01;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 1000ms ease-in;
}

Answer 1

我遇到了类似的问题，但是当我将ReferenceError: AppleID is not defined at appleConnectLoaded (appleService.ts:34)放在CSSTransition内时解决了

TransitionGroup

并更新样式，如下所示

const Fade = ({ children, ...props }) => (
<TransitionGroup>
  <CSSTransition {...props} timeout={1000} classNames="fade">
    {children}
  </CSSTransition>
</TransitionGroup>);

反应CSS转换无效

1 个答案: