transition css

Transition CSS 是一种 CSS3 功能，用于在元素从一种状态转换到另一种状态时添加动画效果。它可以用来为元素的属性（如背景色、位置、大小等）添加过渡效果，让页面变得更加生动有趣。

使用 Transition CSS，需要设置以下属性：

- transition-property：需要添加过渡效果的 CSS 属性名称。
- transition-duration：过渡效果的持续时间。
- transition-timing-function：过渡效果的时间函数，用于控制过渡效果的速度变化。
- transition-delay：过渡效果启动前的延迟时间。

例如，以下代码将会为按钮添加一个背景颜色过渡效果：

button {
  background-color: blue;
  transition-property: background-color;
  transition-duration: 1s;
}

button:hover {
  background-color: red;
}

当鼠标悬停在按钮上时，背景颜色会从蓝色逐渐过渡到红色，持续时间为 1 秒。

相关问题

css transition

CSS Transition是一种CSS3过渡效果，通过在元素的CSS属性变化时添加动画来实现平滑的效果过渡，而不需要使用JavaScript或Flash。 它可以通过设置过渡的属性、持续时间、延迟时间和过渡的函数来实现动画效果。

当元素的某个属性发生改变时，比如说改变了颜色或者位置，CSS Transition可以使得这个属性的变化更加平滑，而不是突然地改变。通过使用Transition，您可以为元素提供更加自然的动态效果，使得网页的用户界面看起来更加生动有趣。

react CSSTransition

### 如何在 React 中使用 CSSTransition 进行过渡动画

#### 安装依赖库
为了能够在项目中使用 `CSSTransition` 组件，需要先安装 `react-transition-group` 库。可以通过 npm 或 yarn 来完成此操作。

npm install react-transition-group

或者

yarn add react-transition-group

#### 创建 CSS 动画类
定义一组用于控制进入和离开状态样式的 CSS 类名，在样式表文件内编写如下代码：

/* styles.css */
.fade-enter {
  opacity: 0;
}

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

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

这些类将被应用到目标元素上以实现淡入/淡出效果[^1]。

#### 使用 CSSTransition 组件包裹要添加动画的内容
引入必要的模块并创建一个简单的例子来展示如何利用 `CSSTransition` 实现组件显示隐藏时的动画效果。

// App.js
import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css';

function App() {
  const [inProp, setInProp] = useState(false);

  return (
    <div>
      <button onClick={() => setInProp(!inProp)}>
        Toggle
      </button>

      <CSSTransition
        in={inProp}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <p>This is some text</p>
      </CSSTransition>
    </div>
  );
}

export default App;

这段代码展示了当点击按钮切换布尔值的状态变化时触发 `CSSTransition` 的工作流程。通过设置 `timeout` 属性指定持续时间，并且指定了自定义的 `classNames` 值以便于关联之前编写的 CSS 规则。