用CSS3+react实现一个元素从左侧入场，左侧出场的动画

可以使用CSS3的`@keyframes`动画和React的`className`属性来实现元素的动画效果。以下是一个示例代码：

import React, { useState } from "react";
import "./App.css";

function App() {
  const [show, setShow] = useState(false);

  const handleBtnClick = () => {
    setShow(!show);
  };

  return (
    <div className="container">
      <button onClick={handleBtnClick}>Toggle</button>
      <div className={`box${show ? " show" : ""}`}></div>
    </div>
  );
}

export default App;

在上面的代码中，我们使用了`useState`来控制元素是否显示。当点击按钮时，调用`handleBtnClick`函数来切换`show`状态。

在CSS文件中，我们定义了两个`@keyframes`动画：`slideIn`和`slideOut`，分别表示元素从左侧进入和从左侧退出的动画。使用`animation`属性来应用这些动画。

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.box {
  position: absolute;
  top: 50%;
  left: -100%;
  width: 100px;
  height: 100px;
  background-color: #f00;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.box.show {
  animation-name: slideIn;
}

.box.hide {
  animation-name: slideOut;
}

@keyframes slideIn {
  from {
    left: -100%;
  }
  to {
    left: 50%;
  }
}

@keyframes slideOut {
  from {
    left: 50%;
  }
  to {
    left: -100%;
  }
}

在上面的代码中，我们将元素的`position`属性设置为`absolute`，并将`left`属性设置为`-100%`，表示元素在左侧屏幕外。当`show`为`true`时，给元素添加`show`类名，触发`slideIn`动画，元素从左侧进入屏幕。当`show`为`false`时，给元素添加`hide`类名，触发`slideOut`动画，元素从左侧退出屏幕。

最后，我们在按钮上绑定`handleBtnClick`函数，点击按钮时切换`show`状态，从而触发元素的动画效果。