How to animate a View

Questions
#1

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)

  1. 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.
  2. 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.
  3. 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.

#2

Transitions between are not supported. Think about Views as about iframes (separate app parts). Transition can be only done within View between pages

#4

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. :sunglasses:

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;
    }
  }
}