CSSTransition过渡效果使用

一、vue使用<transition> 组件

当你想要在 Vue.js 中实现元素的过渡效果时，可以使用 Vue.js 提供的 <transition> 组件。这个组件允许你在元素进入或离开时应用过渡效果。

步骤：

1.使用<transition> 组件

<template>
  <div>
    <button @click="toggle">Toggle Element</button>
    <transition name="fade">
      <p v-if="show">Hello, world!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
};
</script>

2.编写相应的样式，定义动画效果（淡入淡出）

• xx-enter: 元素准备进入时。

• xx-enter-to: 元素进入的最终状态。

• xx-enter-active: 整个进入过渡的过程。可以定义过渡效果的持续时间、延迟时间等过渡相关的属性。

• xx-leave: 元素准备离开时。

• xx-leave-to: 元素离开的最终状态。

• xx-leave-active: 整个离开过渡的过程。可以定义过渡效果的持续时间、延迟时间等过渡相关的属性。

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave {
  opacity: 1;
}
</style>

二、react使用React Transition Group库

React Transition Group 是一个用于管理组件进入和离开动画的库，它提供了一些组件，可以让你在React应用中更容易地实现动画效果。

参考：React Transition Group

步骤：

1.安装 React Transition Group

npm install react-transition-group

2.在React组件中使用它

  <CSSTransition>标签

• in：用于控制动画的进入和离开状态。
• timeout：动画持续时间，以毫秒为单位。
• classNames：动画类名，用于定义 CSS 动画效果。
• unmountOnExit：当动画结束后，是否将组件从 DOM 中卸载。

import React, { useState, useEffect } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css'; // 你的 CSS 文件
const FadeInOut = () => {
  const [show, setShow] = useState(false);
  const handleClick = () => {
    setShow(!show);
  };
  useEffect(() => {
    // 在 show 状态改变时执行动画
  }, [show]);

  return (
    <div>
      <button onClick={handleClick}>
        {show ? 'Hide' : 'Show'}
      </button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div>
          {/* 这里放你想要进行动画的内容 */}
          <h1>Hello, world!</h1>
        </div>
      </CSSTransition>
    </div>
  );
};
export default FadeInOut;

3.编写相应的 CSS 文件 styles.css，定义动画效果（淡入淡出）

• xx-enter: 元素准备进入时。

• xx-enter-active: 整个进入过渡的过程。可以定义过渡效果的持续时间、延迟时间等过渡相关的属性。

• xx-exit: 元素准备离开时。

• xx-exit-active: 整个离开过渡的过程。可以定义过渡效果的持续时间、延迟时间等过渡相关的属性。

.fade-enter { 
  opacity: 0;
}
.fade-enter-active { 
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit { 
  opacity: 1;
}
.fade-exit-active { 
  opacity: 0;
  transition: opacity 300ms; 
}