transition

最新推荐文章于 2024-11-22 17:03:46 发布

原创最新推荐文章于 2024-11-22 17:03:46 发布 · 210 阅读

CC 4.0 BY-SA版权

博客介绍了Vue过渡组件，使用内置过渡封装组件可在插入、更新或移除DOM时实现过渡效果。还阐述了过渡的6个类名，如v-enter、v-enter-active等，介绍了过渡模式in-out和out-in，最后提及了路由过渡效果及相关css样式和js代码。

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

1.vue过渡组件

Vue 在插入、更新或者移除 DOM 时，使用内置的过渡封装组件可以实现过渡效果
语法格式:

 <transition name="xx">
   </div>
</transition>
1
2
3

2.过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换：

v-enter：进入过渡的开始状态
v-enter-active：进入过渡生效时的状态
v-enter-to：进入过渡的结束状态
v-leave：离开过渡的开始状态
v-leave-active：离开过渡生效时的状态
v-leave-to：离开过渡的结束状态

在这里插入图片描述

3.过渡模式(mode属性),下边是属性值:

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。用
out-in 重写之前的开关按钮过渡：

4.路由过渡效果

//用transition标签包裹router-view
 <transition :name="transitionName">
      <keep-alive exclude="about">
        <router-view class="Router"></router-view>
      </keep-alive>
    </transition>

写css样式

.Router{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.slide-left-leave{
opacity: 1;
}
.slide-left-leave-to{
  transform: translateX(-100%);
  
}
.slide-left-enter{
   transform: translateX(100%);
}
.slide-left-enter-to{
  
}
.slide-right-leave{

}
.slide-right-leave-to{

	transform: translateX(100%);
}
.slide-right-enter{

	transform: translateX(-100%);
}
.slide-left-leave-active,.slide-left-enter-active,.slide-right-enter-active,.slide-right-leave-active{
  transition: all .5s ease;
}

js代码

export default {
  name: "App",
  data() {
    return {
      transitionName:''
    };
  },
  create() {},
  mounted() {
   
  },
  /* 页面切换动画 */
  // 
  methods: {},
   watch:{
    $route(to,from){
      console.log(to);
      if(to.name=='About'&&from.name=='Home'){
        this.transitionName='slide-left'
      }else if(to.name=='Home'&&from.name=='About'){
        this.transitionName='slide-right'
      }else{
        this.transitionName=""
      }
    }
  },
};