面试题：React中如何结合条件渲染实现简单动画效果

Question

假设你有一个按钮，点击按钮时需要根据一个布尔值来决定是否显示一个带有淡入动画效果的组件。请用React实现这个功能，描述你会用到哪些技术，例如React的状态管理、CSS动画或者第三方动画库，并给出关键代码片段。

Answer 1

用到的技术

1. React状态管理：使用useState钩子来管理布尔值状态，决定组件是否显示。
2. CSS动画：利用CSS的@keyframes规则创建淡入动画，并通过设置opacity等样式属性来应用动画。

关键代码片段

import React, { useState } from 'react';
import './styles.css';

const App = () => {
  const [shouldShow, setShouldShow] = useState(false);

  const handleClick = () => {
    setShouldShow(!shouldShow);
  };

  return (
    <div>
      <button onClick={handleClick}>点击我</button>
      {shouldShow && <div className="fade-in-component">要显示的组件</div>}
    </div>
  );
};

export default App;

在styles.css中：

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in-component {
  animation: fade-in 0.5s ease-in-out;
}