Wow, brand new forum.
Since the old forum is set as archive, I copied my question here. (Is this the first user post of new forum? Am i the first registered user?)
How to show a view with the effect of slide in and hide it with the back animation?
Here’s my case.
I have 4 tab views(view-1, view-2, view-3, view-4), each view has a single page. And there’s another hidden view(view-share)
- In the page of view-1, a link to page-share-1 in view-share. when you tap it, view-share should be slide in.
- In page-share-1, tap the back button, view-share should be hidden, with back animation, then page-share-1 should be removed from view-share.
- In page-share-1, there’s a link to the page in view-2. Tap it, view-share should be hidden(with back animaiton), pages in view-share should be removed, and view-2 should be visible.
In the official example of tabbar framework7.io/examples/tab-bar/, you switch to “Inbox”, tap “About Us”, tap “Information”, then back to “Inbox”, “About Us” is still there. What i want is: except for the 4 pages in the 4 views, all other pages are shown in one view, not 4 separate ones.
Anyone has some ideas? This has plagued me for a long time.
And i’m planning to refactor my app with vue. it’s better to get a solution also works with F7 Vue.
Transitions between are not supported. Think about Views as about iframes (separate app parts). Transition can be only done within View between pages
Yes, i understand. However, after some study, I found a solution, with some tricks.
Set position: absolute to .view-main, this will let the mainView cover the 4 tab views. Then hide page-blank with opacity: 0, 4 tab views is now visible. (attention to the pointer-event settings!!!)
All links will be open in mainView by default, so the animation will be running as what I expected: You tap a link in view-1, the target page will be shown with slide animation. You tap back, back animation is also perfectly good.
How about Tap a tab-link in a page in mainView?
Well, use < a href="#view-3" class=“tab-view-link”>tab view 3 < /a>. By tapping .tab-view-link (which i attached my own click event handler), it will switch to the target view, and do a force back to page-blank (which will clear mainView’s history).
Everything seems working great. 
index.html
<div class="views tabs">
<div id="view-1" class="view tab">....<div>
<div id="view-2" class="view tab">....<div>
<div id="view-3" class="view tab">....<div>
<div id="view-4" class="view tab">....<div>
</div>
<div class="toolbar tabbar tabbar-labels">....</div>
<div class="view view-main">
<div class="pages">
<div data-page="page-blank" class="page page-blank"></div>
</div>
</div>
app.js
var myApp = new Framework7();
var $$ = Dom7;
var viewMain = myApp.addView('.view-main', {
domCache: true,
});
$$('.view-main').on('click', '.tab-view-link', function (e) {
myApp.showTab($$(this).attr('href'));
myApp.mainView.back({ pageName: 'page-blank', force: true });
e.stopPropagation();
})
app.less
.view-main {
position: absolute;
pointer-events: none;
top:0;
.pages {
background:none;
.page {
pointer-events: auto;
}
.page-blank {
opacity:0;
pointer-events: none;
}
}
}