Page 1
<ion-page>
<ion-content :scroll="false" :fullscreen="true">
<ion-row>
<ion-col class="min-vh-50 hero-image-container ion-padding" size="12"></ion-col>
</ion-row></ion-content></ion-page>
Page 1 CSS
.min-vh-50{
min-height: calc(50vh - 32px);
}
.hero-image-container{
background-position: center;
background-size: cover;
background-image: url('../assets/heroImage.png');
}
Welcome! To clarify, you are wanting the image to not be visible at all during the transition from page 1 to page 2?
Can you provide your full code of page 1 and page 2?
Page 1
<template>
<ion-page>
<ion-content :scroll="false" :fullscreen="true">
<ion-row>
<ion-col class="min-vh-50 hero-image-container ion-padding" size="12">
<ion-text>
<h6 class="ion-text-uppercase text-white font-w-9 font-size-24">
Personalize your rozkhail
</h6>
</ion-text>
<ion-text color="light ">
<h6 class="font-size-14">
Bring your teams, players and competition as close as possible
</h6>
</ion-text>
</ion-col>
<ion-col
class="ion-padding login-btns-container flex flex-col min-vh-50 ion-text-center gap-24"
size="12"
>
<ion-button expand="block" size="large" class="google-btn">
<div class="w-full flex ion-justify-content-between">
<span>Continue with Google</span>
<ion-icon :icon="logoGoogle"></ion-icon>
</div>
</ion-button>
<ion-text color="light"
>------------------- or -------------------</ion-text
>
<div class="flex flex-col gap-8">
<ion-button
@click="router.push({name:'auth.register'})"
expand="block"
size="large"
color="secondary"
>
Create an account
</ion-button>
<ion-button expand="block" size="large" color="dark">
Login
</ion-button>
</div>
</ion-col>
</ion-row>
</ion-content>
</ion-page>
</template>
<script>
import { defineComponent } from 'vue';
import { IonIcon,IonButton,IonCol,IonRow,IonPage,IonContent,IonText } from '@ionic/vue';
import { logoGoogle } from 'ionicons/icons';
import { useRouter } from 'vue-router';
export default defineComponent({
components:{
IonIcon,
IonButton,IonCol,IonRow,IonPage,IonContent,IonText
},
name: 'WelcomeView',
setup(){
const router = useRouter();
return {logoGoogle,router}
}
});
</script>
<style scoped>
.min-vh-50 {
min-height: calc(50vh - 32px);
}
.hero-image-container {
background-position: center;
background-size: cover;
background-image: url("../assets/heroImage.png");
}
.google-btn {
--background: #3a81e1;
--background-hover: #1e63be;
--background-activated: #1e63be;
--background-focused: #1e63be;
--color: white;
}
</style>
Page 2
<template>
<ion-page>
<base-appbar :title="'create your rozkhail account'" />
<ion-content class="ion-padding">
<ion-list class="flex flex-col gap-12">
<base-input
v-model="email"
label="YOUR EMAIL"
placeholder="Enter your email"
/>
<base-input
v-model="password"
label="YOUR PASSWORD"
placeholder="Enter your password"
/>
</ion-list>
</ion-content>
<base-fab-footer @fabClicked="router.push({name:'setup.user.welcome'})" />
</ion-page>
</template>
<script>
import { IonPage,IonList,IonContent} from '@ionic/vue';
import {defineComponent, ref} from "vue";
import {useRouter} from "vue-router";
import {chevronForward} from "ionicons/icons"
import BaseAppbar from '@/components/baseAppbar.vue';
import BaseFabFooter from '@/components/baseFabFooter.vue';
import BaseInput from '@/components/baseInput.vue';
export default defineComponent({
name:'AuthRegister',
components:{IonPage,IonContent,IonList,BaseAppbar, BaseFabFooter, BaseInput},
setup(){
const router = useRouter();
const email=ref('');
const password=ref('');
return {
router,chevronForward,email,password
}
}
})
</script>
<style></style>
Yes, I want the image to not be visible at all during the transition from page 1 to page 2?
Hmmm…I am not seeing anything wrong with your code. Your video looks to be the standard transition, just slower than normal.
I am curious what the base-appbar looks like. Could you share your code for that? I’ve had some weird transition issues in IonHeader when not everything was wrapped in an IonToolbar.
A code repo or StackBlitz replication of the issue would be helpful too.
A custom transition could be set too but there does seem to be something else going on here.