forked from fzu102201435/front
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.1 KiB
53 lines
1.1 KiB
<template>
|
|
<!-- 页面1 图片 -->
|
|
<view class="page1"></view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isTransitioning: false, // 控制渐变效果
|
|
};
|
|
},
|
|
mounted() {
|
|
this.startTransition(); // 在组件加载时开始渐变
|
|
},
|
|
methods: {
|
|
startTransition() {
|
|
this.isTransitioning = true;
|
|
// 2秒后跳转到 page2
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pages/transition/page2/page2'
|
|
});
|
|
}, 4000); // 2000毫秒后跳转
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page1 {
|
|
background-image: url('@/static/transition/page1/pictures/page1.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column; /* 纵向排列 */
|
|
align-items: center; /* 水平居中 */
|
|
justify-content: center; /* 垂直居中 */
|
|
opacity: 0; /* 初始透明度 */
|
|
animation: fadeIn 2s forwards; /* 添加渐变动画 */
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0; /* 起始透明度 */
|
|
}
|
|
to {
|
|
opacity: 1; /* 结束透明度 */
|
|
}
|
|
}
|
|
</style>
|