Issue
I just created a new ionic vue app (tabs template) and noticed after swapping mode to ios the routing animations are gone.
With md everything works fine.
My index.html:
<!DOCTYPE html>
<html lang="en" mode="ios">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
Also when routing this error pops up in the console
TypeError: Cannot set property 'innerText' of null
at animateLargeTitle (ios.transition-48010460.js?2f12:1)
at createLargeTitleTransition (ios.transition-48010460.js?2f12:1)
at iosTransitionAnimation (ios.transition-48010460.js?2f12:1)
at eval (index-c3ff7f2e.js?9897:1)
at step (tslib.es6.js?f530:102)
at Object.eval [as next] (tslib.es6.js?f530:83)
at fulfilled (tslib.es6.js?f530:73)
My versions:
Ionic CLI : 6.14.1
Ionic Framework : @ionic/vue 5.6.6
Vue : 3.0.0
Vue-router : 4.0.0
Solution
The problem was that the collapsible large title was configured incorrectly.
This is how it should look like:
<ion-header :translucent="true">
<ion-toolbar>
<ion-title> {{ greeting }} </ion-title>
<ion-buttons slot="end">
<ion-button router-link="/test" routerDirection="forward" color="dark">
<ion-icon :icon="timeOutline" size="large" />
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar class="tab-toolbar">
<ion-title size="large"> {{ greeting }} </ion-title>
</ion-toolbar>
</ion-header>
</ion-content>
Also here is the repo that i used for testing: https://github.com/NBprojekt/ionic-vue-routing
And an working example
Answered By - Norbert Bartko
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.