Vue之transition动画_<transition name="fade" mode="out-in">-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_26641781/article/details/83864394

本文详细介绍了Vue.js中过渡动画的使用方法，包括如何通过<transition>组件实现元素的过渡效果，自定义过渡类名，以及过渡效果的mode属性指定。同时，还讲解了如何使用相关函数控制过渡过程，并展示了如何在多个容器中使用transition-group。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo:

<template>
  <div id="root">
    <div>
      <router-link to="/home">首页 \</router-link>
      <router-link to="/about">关于</router-link>
    </div>
    <transition name="fade">
      <router-view ></router-view>
    </transition>
  </div>
</template>

<style lang="less">
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>

transition使用

<transition name="fade">
    运动东西(元素，属性、路由....)
</transition>

class定义：

.fade-enter{ } 进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态)
.fade-enter-active{ } 进入过渡的结束状态，元素被插入时就生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。.fade-enter-active{ } 进入过渡的结束状态，元素被插入时就生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
.fade-leave{ } 离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；.fade-leave{ } 离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
.fade-leave-active{ } 离开过渡的结束状态，元素被删除时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。.fade-leave-active{ } 离开过渡的结束状态，元素被删除时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

自定义过度类名

默认的.fade-enter变成.fade-in-enter;
默认的.fade-enter-active变成.fade-in-active;
默认的.fade-leave变成.fade-out-enter;
默认的.fade-leave-active变成.fade-out-active;

<template>
  <div id="root">
    <div>
      <router-link to="/home">首页 \</router-link>
      <router-link to="/about">关于</router-link>
    </div>
    <transition 
    name="fade"
    enter-class="fade-in-enter"
    enter-active-class="fade-in-active"
    leave-class="fade-out-enter"
    leave-active-class="fade-out-active">
    <router-view ></router-view>
    </transition>
  </div>
</template>

<style lang="less">
.fade-in-active, .fade-out-active{
  transition: opacity .5s
} 
.fade-in-enter, .fade-out-active{
  opacity: 0 
}
</style>

transition相关函数

<transition name="fade"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave">
    <router-view ></router-view>
    </transition>

 methods:{
    beforeEnter(){
        console.log('动画enter之前');
    },
    enter(){
        console.log('动画enter进入');
    },
    afterEnter(){
        console.log('动画进入之后');
    },
    beforeLeave(){
        console.log('动画leave之前');
    },
    leave(){
        console.log('动画leave');
    },
    afterLeave(){
        console.log('动画leave之后');
    }
  }

在这里插入图片描述

过度效果mode属性指定：

<transition name="fade" mode="in-out">
      <router-view ></router-view>
  </transition>

<transition name="fade" mode="out-in">
      <router-view ></router-view>
    </transition>

transition-group过度多个容器，需要设置key值

<transition-group name="fade" mode="in-out">
      <router-view key="aa"></router-view>
      <div key="bb">Hello</div>
  </transition-group>