Vue 导航切换页面过渡

最新推荐文章于 2023-04-02 22:43:52 发布

橙之殇

最新推荐文章于 2023-04-02 22:43:52 发布

阅读量328

点赞数

分类专栏： Vue组件开发 H5/jquery/vue/layui 文章标签： vue

本文链接：https://blog.csdn.net/qq_34626688/article/details/107763937

版权

H5/jquery/vue/layui 同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

Vue组件开发

4 篇文章 0 订阅

订阅专栏

1.代码

<template>
  <div id="app">
    <Header v-if="this.$route.path!=='/'"></Header>
    <transition name="fade-transform" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isRouterAlive: true // 控制视图是否显示的变量
    }
  },
  methods: {

  }
}
</script>
<style lang="less">
  .fade-transform-leave-active,.fade-transform-enter-active {
    transition: all .5s;
  }
  .fade-transform-enter {
    opacity: 0;
    transform: translateX(-30px);
  }
  .fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
</style>