vue设置每次加载页面时展示一个双开门效果

最新推荐文章于 2024-09-12 16:43:23 发布

凉风听雪

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量193

点赞数 1

分类专栏：前端开发文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/p_s_p/article/details/140986413

版权

前端开发专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、首先创建一个双开门的蒙层组件

<!-- DoorOverlay.vue -->
<template>
    <div v-if="isVisible" class="door-overlay">
      <div class="door left-door"></div>
      <div class="door right-door"></div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isVisible: false
      };
    },
    methods: {
      show() {
        this.isVisible = true;
      },
      hide() {
        this.isVisible = false;
      }
    }
  };
  </script>
  
  <style scoped>
  .door-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: rgba(0, 0, 0, 0.5); */
    z-index: 9999;
    overflow: hidden;
  }
  
  .door {
    width: 50%;
    height: 100%;
    background-color: #4891DA;
    transition: transform 0.5s;
  }
  
  .left-door {
    transform: translateX(0);
  }
  
  .right-door {
    transform: translateX(0);
  }
  
  .door-overlay.hide .left-door {
    transform: translateX(-100%);
  }
  
  .door-overlay.hide .right-door {
    transform: translateX(100%);
  }
  </style>

二、在router的index.js文件中引用

import Vue from 'vue'
import VueRouter from 'vue-router'

import DoorOverlay from '@/components/DoorOverlay'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'hash',
  routes:
   [ 
    {
      path: '/',
      // 默认打开后就是这个主页
      component: () => import('@/components/Home/Home'),
    }
   ]
 }) 


// 创建 DoorOverlay 实例
const doorOverlay = new Vue(DoorOverlay).$mount();
document.body.appendChild(doorOverlay.$el);


// 全局前置守卫
router.beforeEach((to, from, next) => {
  doorOverlay.show();
  setTimeout(() => {
    next();
  }, 100); // 设置动画持续时间
});


// 全局后置守卫
router.afterEach(() => {
  setTimeout(() => {
    doorOverlay.$el.classList.add('hide');
    setTimeout(() => {
      doorOverlay.hide();
      doorOverlay.$el.classList.remove('hide');
    }, 500); // 设置动画持续时间
  }, 100); // 设置动画持续时间
});

export default router;

三、在App.vue文件中使用蒙层组件

<template>
  <div id="app">
  <Header></Header>

    <!-- 路由挂载 -->
    <router-view></router-view>

  <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/Header/Header'
import Footer from '@/components/Footer/Footer'
import DoorOverlay from './components/DoorOverlay'

export default {
  name: 'App',
  components: {
    Header,
    Footer,
    DoorOverlay
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{
  text-decoration: none;
  color: #000000;
}
li{
  list-style: none;
}
*{
  margin: 0;
  padding: 0;
}
@media screen and (max-width:768px) {
  /* #app {
    padding-top:200px;
  } */
}
</style>