Vue 3页面过渡：如何让下一页已经到位，并通过滑动显示它？

我正在尝试在Vue 3中使用vue router进行页面转换
This image sums up what I'm trying to do
我正在建立一个网站，不同的页面（在图像上：蓝色区域），都有一个滚动和一个共同的固定导航栏在顶部。如果你点击顶部栏的链接之一，它应该移动整个页面容器底部的100vh，以揭示一个特殊的视图（在图像上：红色区域）

我的问题

由于黄色条是固定的，我没有设法让它离开蓝色页面，它保持固定在y：0
我想避免笨拙的东西，如快速添加beforeRouteLeave一个位置：绝对顶部的导航栏和补偿的顶部位置的基础上滚动位置。
我并没有真正设法使两个视图在彼此的顶部，这样蓝色页面就可以显示已经在正确位置的红色页面。
我不知道该怎么办
几天来我一直在尝试不同的东西：
在App.vue中的单个视图包含蓝色视图和红色视图。没有运气。
在App.vue中有两个不同的。没有运气。
各种级别的绝对 Package ，溢出隐藏，给定100vh值等.没有运气
我的问题
你知道我应该如何分割不同的部分吗？（应用程序， Package 器，子 Package 器，裁剪器，...）
一个人能做到吗？
它能在没有超级笨拙的JS的情况下完成路线改变吗？

感谢您的阅读

我希望这个想法可以帮助你。
因为页面只是一个在重定向时改变的组件，所以你可以创建一个包含两个页面的页面。例如，根据你的图片，我有两个页面（Red和Blue）。然后，我将创建Merge，其中包含Red和Blue
这是Red.vue

<template>
  <div class="red-page">
    Red page
    <div style="height: 200px" />
    <div class="link" @click="$emit('redirect')">To blue</div>
  </div>
</template>

<script>
export default {
  name: 'Red',
  emits: ['redirect'],
};
</script>

<style>
.red-page {
  background-color: red;
  height: 100vh;
  color: white;
}

.link {
  cursor: pointer;
  color: white;
}
</style>

字符串
这是Blue.vue

<template>
  <div class="blue-page">
    <div class="header" />
    <!-- Any content -->
    <div style="height: 700px" />
    <div class="link" @click="$emit('redirect')">To red</div>
  </div>
</template>

<script>
export default {
  name: 'Blue',
  emits: ['redirect'],
};
</script>

<style>
.blue-page {
  background-color: blue;
  height: 1000px;
}

.header {
  background-color: yellow;
  height: 50px;
  position: fixed;
  width: 90vw;
}

.link {
  cursor: pointer;
  color: white;
}
</style>

型
这是Merge.vue

<template>
  <div>
    <Red
      style="position: fixed; height: 100vh; width: 100vw; z-index: -9999"
      @redirect="redirect(false)"
    />
    <Transition name="slide-down">
      <Blue v-if="isBlue" @redirect="redirect(true)" />
    </Transition>
  </div>
</template>

<script>
import Blue from './Blue.vue';
import Red from './Red.vue';

export default {
  name: 'Merge',
  components: { Blue, Red },

  data: () => ({
    isBlue: true,
  }),

  methods: {
    redirect(toRed) {
      this.isBlue = !toRed;
      history.pushState({}, null, this.isBlue ? '/blue' : '/red');
    },
  },

  created() {
    this.isBlue = this.$route.path === '/blue';
  },
};
</script>

<style>
.slide-down-enter-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-down-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-down-enter-from,
.slide-down-leave-to {
  transform: translateY(1000px);
}
</style>

型
把Red和Blue都放在Merge里面，然后用<Transition/>包裹Blue，这样就可以给Blue加上过渡，让它滑下来露出Red，最后在Red和Blue里面，尝试重定向的时候发出一些信号
详细信息：https://stackblitz.com/edit/vue-fyebnk
在这个例子中，我让Blue在转到Red时向下滑动，从Red返回到Blue时向上滑动。
在Blue中，当你看到Blue的右侧时，你可以看到Red被渲染。但是你可以修改它，因为如果用户不打算使用它，首先加载Red可能会浪费时间。
当然，只有当您单击Blue或Red内部的链接时，才会发生转换。任何其他重定向方法都会立即显示Blue或Red
此外，如果图书馆是一条路要走。我认为你应该看看RevealJS或sli.dev
祝你好运

Vue 3页面过渡：如何让下一页已经到位，并通过滑动显示它？

1条答案

相关问题

热门标签

最新问答