当前位置：首页 > React

react和vue中如何实现过渡动画

2026-01-26 03:03:00React

React 中实现过渡动画

React 提供了 React Transition Group 库来处理组件进入和离开时的过渡动画。该库包含 CSSTransition 和 TransitionGroup 组件，适合与 CSS 动画或第三方动画库（如 Animate.css）结合使用。

安装 React Transition Group：

npm install react-transition-group --save

使用 CSSTransition 实现单个元素的过渡动画：

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

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

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="box">Hello</div>
      </CSSTransition>
    </div>
  );
}

对应的 CSS 样式：

.fade-enter {
  opacity: 0;
}

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

.fade-exit {
  opacity: 1;
}

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

对于列表动画，使用 TransitionGroup 包裹多个 CSSTransition 组件：

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

function ListExample({ items }) {
  return (
    <TransitionGroup>
      {items.map(item => (
        <CSSTransition
          key={item.id}
          timeout={500}
          classNames="item"
        >
          <div>{item.text}</div>
        </CSSTransition>
      ))}
    </TransitionGroup>
  );
}

Vue 中实现过渡动画

Vue 内置了 <transition> 和 <transition-group> 组件，无需额外安装库即可实现过渡效果。Vue 的过渡系统基于 CSS 类名自动应用动画效果。

单个元素的过渡动画：

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <div v-if="show" class="box">Hello</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>

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

列表过渡动画使用 <transition-group>：

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item.id">
        {{ item.text }}
      </li>
    </transition-group>
  </div>
</template>

<style>
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

Vue 还支持通过 JavaScript 钩子实现更复杂的动画逻辑：

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <div v-if="show" class="box"></div>
  </transition>
</template>

<script>
export default {
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      anime({
        targets: el,
        opacity: 1,
        duration: 1000,
        complete: done
      });
    },
    leave(el, done) {
      anime({
        targets: el,
        opacity: 0,
        duration: 1000,
        complete: done
      });
    }
  }
};
</script>