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

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過渡和動畫示例的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！