Vue 路由
Vue 混入 

Vue 过渡 & 动画

Vue 的过渡系统允许你在元素插入或移除 DOM 时，或在元素状态改变时，应用过渡效果。它主要通过<transition>组件来实现，可以包裹任意元素或组件。


Vue 过渡（Transition）

Vue的过渡系统允许你在元素插入或移除DOM时，或在元素状态改变时，应用过渡效果。它主要通过<transition>组件来实现，可以包裹任意元素或组件。


基本用法

<template>
  <div>
    <transition name="fade">
      <p v-if="show">这是一个过渡动画效果示例</p>
    </transition>
    <button @click="toggleShow">{{ buttonText }}</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      buttonText : '显示'
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
this.buttonText=this.show ? '隐藏':'显示';
    }
  }
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>


  • <transition name="fade"> 包裹了要过渡的内容。name="fade" 是过渡效果的名称，Vue会自动为不同过渡阶段添加相应的类名。

  • v-if="show" 控制元素的显示与隐藏。

  • 在 <style> 中定义了过渡效果的具体样式，例如 .fade-enter-active、.fade-enter、.fade-leave-active、.fade-leave-to 等类名。


过渡类名说明

.fade-enter: 进入过渡的开始状态，元素被插入时生效，在下一帧移除。

.fade-enter-active: 进入过渡的状态，元素整个过渡过程中作用，在元素插入后立即生效，在过渡完成后移除。

.fade-leave: 离开过渡的开始状态，元素被删除时生效，在下一帧移除。

.fade-leave-active: 离开过渡的状态，元素整个过渡过程中作用，在元素移除后立即生效，在过渡完成后移除。


Vue 动画（Animation）

除了过渡效果外，Vue还提供了更复杂的动画能力，可以通过<transition>组件的JavaScript钩子函数或者<transition-group>组件来实现。


JavaScript钩子函数

在 <transition> 或 <transition-group> 中可以使用一系列JavaScript钩子函数来定义更精细的动画效果：

  • before-enter

  • enter

  • after-enter

  • enter-cancelled

  • before-leave

  • leave

  • after-leave

  • leave-cancelled

这些钩子函数可以在动画过程的不同阶段执行自定义的JavaScript逻辑，例如操作DOM、添加类名等。

使用示例

<template>
  <div>
    <transition
      name="custom-animation"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
      @after-enter="afterEnter"
      @after-leave="afterLeave"
    >
      <p v-if="show">这是一个动画效果示例</p>
    </transition>
    <button @click="toggleShow">{{ buttonText }}</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
buttonText : '显示动画'
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
this.buttonText=this.show ? '隐藏动画':'显示动画';
    },
    beforeEnter(el) {
console.log(el);
      // 进入动画前的准备工作
      el.style.opacity = 0;
      el.style.transform = 'translateY(20px)';
    },
    enter(el, done) {
      // 执行进入动画
      setTimeout(() => {
        el.style.transition = 'opacity 1s, transform 1s';
        el.style.opacity = 1;
        el.style.transform = 'translateY(0)';
      }, 100);
      setTimeout(() => {
        done(); // 必须手动调用 done 函数
      }, 1000);
    },
    leave(el, done) {
      // 执行离开动画
console.log(el);
      el.style.transition = 'opacity 0.5s, transform 0.5s';
      el.style.opacity = 0;
      el.style.transform = 'translateY(20px)';
      setTimeout(() => {
        done(); // 必须手动调用 done 函数
      }, 200);
    },
    afterEnter(el) {
console.log(el);
      // 进入动画完成后的处理
    },
    afterLeave(el) {
console.log(el);
      // 离开动画完成后的处理
    }
  }
};
</script>
<style>
.custom-animation-enter-active {
  transition: all 1s ease;
}
.custom-animation-leave-active {
  transition: all 0.5s ease;
}
</style>



Vue 的过渡和动画系统使得在应用程序中添加流畅的过渡效果变得非常简单和灵活。通过使用 <transition> 或者 <transition-group> 组件以及 JavaScript 钩子函数，你可以为你的Vue应用创建出色的动画效果，提升用户体验。