我只想知道如何在 vue.js 中的页面与第三页之间进行转换。
喜欢主页到关于页面,在过渡的中间我放了一个带有品牌标志的页面。
就像他们在这里做的那样:https ://www.details.co.jp
谢谢。
我只想知道如何在 vue.js 中的页面与第三页之间进行转换。
喜欢主页到关于页面,在过渡的中间我放了一个带有品牌标志的页面。
就像他们在这里做的那样:https ://www.details.co.jp
谢谢。
从技术上讲,这是一个加载屏幕。你可以通过几种方式做到这一点。首先要做的是使用您的品牌徽标和动画创建加载组件。在根组件中导入它,并根据您创建的加载变量在模板中使用 v-show。如果您正在对后端进行 API 调用,那么您可以使用您在根组件中使用的任何 http 客户端库创建一个拦截器。将拦截器放在创建的生命周期方法中,当它拦截请求时,会设置加载变量。当它拦截响应时,加载变量未设置。如果 API 调用很快或者您没有进行任何 API 调用,那么在创建的生命周期方法中,将 afterEach 路由器调用与 javascript 超时函数一起使用,该函数会在设定的毫秒数后取消设置加载变量。
使用 axios 的示例:
<template>
<div class="main-container">
<div class="loader"> <!-- set high z-index for overlay -->
<Loading v-show="loading" />
</div>
<router-view />
</div>
</template>
<script>
import Loading from "@/components/loading";
import axios from "axios";
export default {
data() {
return {
// loading variable - default false so timeout unsets it
loading: false,
};
},
components: {
// loading component with logo
Loading,
},
created: function() {
// router call to set minimum loading time
this.$router.afterEach(() => {
setTimeout(() => (this.loading = false), 400);
});
// when requests are made from this or any child component, set loading
axios.interceptors.request.use((config) => {
this.loading = true;
return config;
});
// once a response is received, unset loading
axios.interceptors.response.use((config) => {
this.loading = false;
return config;
});
}
};
</script>
我发现另一种技术要容易得多。
我刚刚做了一个组件,它的屏幕的所有高度和宽度都固定在一个固定的位置,我在等待一段时间后将其关闭
像这样:
在 App.vue 中:(以获得漂亮的淡入淡出过渡到页面过渡)
<template>
<div id="app">
<transition name="fade" mode="out-in">
<router-view />
</transition>
</div>
</template>
<style lang="css">
.fade-enter, .fade-leave-to{
transition: translateX(3em);
opacity: 0;
}
.fade-enter-active, .fade-leave-active{
transition: all .3s ease;
}
</style>
在 Home.vue 中:
<template>
<div class="home">
<Transition :name="'- Brand Name -'" v-if="display"/>
<div>
home things
</div>
</div>
</template>
<script>
import Transition from "@/components/Transition.vue";
export default {
name: "About",
components: {
Transition
},
data() {
return {
display: true,
};
},
mounted(){
setTimeout(() => {
this.display= false
}, 3500);
}
};
</script>