在Vue中，使用<transition>和<transition-group>組件可以有效實(shí)現(xiàn)元素的進(jìn)入和離開(kāi)動(dòng)畫(huà)。 1. <transition>用於單個(gè)條件渲染元素，通過(guò)v-if、v-show或動(dòng)態(tài)組件觸發(fā)，支持自定義過(guò)渡類名和動(dòng)畫(huà)生命週期鉤子；2. <transition-group>用於列表動(dòng)畫(huà)，每個(gè)列表項(xiàng)需綁定唯一key，並可通過(guò)tag指定包裹標(biāo)籤，同時(shí)支持move動(dòng)畫(huà)；3. 可結(jié)合JavaScript鉤子（如@before-enter、@enter）與第三方動(dòng)畫(huà)庫(kù)（如GSAP）實(shí)現(xiàn)更複雜的控制；4. 注意事項(xiàng)包括：僅對(duì)條件渲染元素應(yīng)用動(dòng)畫(huà)、正確使用key屬性、使用mode控制組件切換順序、避免佈局抖動(dòng)等。這些方法為Vue應(yīng)用提供流暢自然的動(dòng)畫(huà)效果。

When you're working with Vue, adding transitions and animations to elements can make your app feel more polished and responsive. The built-in <transition></transition> and <transition-group></transition-group> components are powerful tools that let you smoothly animate elements when they enter or leave the DOM.

Here's how to use them effectively with real-world examples.

How <transition></transition> Works for Single Elements

The <transition></transition> component wraps a single element (or component) that conditionally renders — like when using v-if , v-show , or dynamic components. It applies transition classes during the animation lifecycle.

Let's say you have a simple modal dialog that appears and disappears based on a boolean:

 <transition name="fade">
  <div v-if="isVisible">This is a modal</div>
</transition>

In your CSS:

 .fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

What happens:

• When isVisible becomes true , Vue adds .fade-enter and removes it after one tick, then adds .fade-enter-active .
• When isVisible becomes false , Vue triggers .fade-leave and .fade-leave-active .

You can also use other types of transitions like slide, scale, or combine multiple styles for richer effects.

Using <transition-group> for Lists

If you want to animate a list of items — for example, when adding or removing from an array — <transition-group> is the way to go. It works similarly to <transition> , but it's designed for rendering multiple elements.

Imagine a todo list where users can add and remove tasks:

 <transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

<input v-model="newItemText" @keyup.enter="addItem" />

CSS:

 .list-enter-active,
.list-leave-active {
  transition: all 0.3s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
.list-move {
  transition: transform 0.3s;
}

Key points:

• Each item must have a unique :key .
• Use the tag attribute to specify what HTML tag should wrap the group.
• .list-move handles movement animations when the list order changes.

This creates a smooth experience when items are inserted, removed, or reordered.

Customizing Transition Timing with JavaScript Hooks

Sometimes you might need more control than CSS alone provides. Vue allows you to hook into JavaScript-based transitions using events like @before-enter , @enter , and @after-enter .

For example, animating with GSAP :

 <transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <div v-if="isVisible" class="box"></div>
</transition>

In your methods:

 methods: {
  beforeEnter(el) {
    el.style.opacity = 0;
    el.style.transform = 'scale(0)';
  },
  enter(el, done) {
    gsap.to(el, {
      opacity: 1,
      scale: 1,
      duration: 0.5,
      onComplete: done
    });
  },
  leave(el, done) {
    gsap.to(el, {
      opacity: 0,
      scale: 0.5,
      duration: 0.3,
      onComplete: done
    });
  }
}

Use cases for JS hooks include:

• Complex animations involving SVG or canvas
• Syncing with external libraries
• Precise timing control beyond CSS transitions

Remember to call done() inside @enter and @leave if you're doing asynchronous animations.

Common Gotchas and Tips

There are a few things to keep in mind when working with Vue transitions:

• Only apply transitions to conditionally rendered elements — wrapping always-visible elements won't do anything.

• Make sure to use key correctly , especially in dynamic components or lists, to help Vue track identity.

• Use mode for transitions between two elements , like toggling between buttons or components:

   <transition mode="out-in">
    <component :is="currentTabComponent" />
  </transition>

• Don't forget about layout shifts — when animating height or width, consider using max-height or transform to avoid jarring reflows.

---

These examples should give you a solid foundation for handling transitions and animations in Vue. Whether you're fading modals in and out or animating entire lists, Vue makes it easy to add motion without too much complexity.基本上就這些。

以上是元素的VUE過(guò)渡和動(dòng)畫(huà)示例的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！