Vue.js 2.0 提供了过渡效果的机制,通过内置的 <transition> 组件以及钩子函数,你可以实现在元素插入、更新和移除时的过渡效果。以下是一个简单的介绍:

1. <transition> 组件: 在 Vue 中,你可以用 <transition> 包裹元素,这个组件能够自动应用过渡效果。
   <template>
     <div>
       <transition name="fade">
         <p v-if="show">Hello, Vue!</p>
       </transition>
       <button @click="toggleShow">Toggle</button>
     </div>
   </template>

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

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

   在上述例子中,使用了 <transition> 包裹了一个带有 v-if 的 <p> 元素,当 show 改变时,Vue 会自动应用名为 "fade" 的过渡效果。

2. CSS 过渡类名: Vue 会在插入、更新和移除元素时自动应用类名,你可以通过这些类名来定义过渡效果的样式。

   - .fade-enter-active 和 .fade-leave-active 控制过渡时元素的样式。
   - .fade-enter 和 .fade-leave-to 控制过渡开始和结束时的样式。

   在上述例子中,使用了 opacity 过渡,你可以根据需要使用其他 CSS 属性。

3. 过渡钩子函数: 如果你需要更精细的控制,可以使用过渡钩子函数,例如 before-enter、enter、after-enter 等。这些钩子函数可以在过渡的不同阶段执行自定义逻辑。
   <transition
     name="fade"
     @before-enter="beforeEnter"
     @enter="enter"
     @after-enter="afterEnter"
   >
     <p v-if="show">Hello, Vue!</p>
   </transition>
   methods: {
     beforeEnter(el) {
       // 在进入动画之前触发
       // 可以在这里设置初始状态
     },
     enter(el, done) {
       // 进入动画时触发
       // 可以在这里定义动画效果
       done(); // 这个回调函数用于通知 Vue 进入动画结束
     },
     afterEnter(el) {
       // 进入动画结束后触发
     }
   }

这只是一个简单的介绍,Vue.js 过渡效果还支持 CSS 过渡、CSS 动画、JavaScript 钩子等更多高级用法。详细信息可以查阅 Vue.js 的官方文档。


转载请注明出处:http://www.zyzy.cn/article/detail/4807/Vue