onsen ui animation between page transitions doesn't work?

[Jackson]

Hello,

I’m just trying to add a slide animation between my page transitions but I can’t seem to be able to get it to work for some reason.

The javascript that I’m using is like this:

window.fn = {};

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};

window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page)
    .then(menu.close.bind(menu));
	content.resetToPage(page, { animation: 'slide' });
};

and this is my entire page:

<ons-splitter>
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-item onclick="fn.load('home.html')" tappable>
            Home
          </ons-list-item>
          <ons-list-item onclick="fn.load('about.html')" tappable>
            About
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
  </ons-splitter>

  <ons-template id="home.html">
    <ons-page modifier="main">
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Main
        </div>
      </ons-toolbar>
      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
        
		
      </p>
    </ons-page>
  </ons-template>

  <ons-template id="about.html">
    <ons-page modifier="main">
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          About
        </div>
      </ons-toolbar>
    </ons-page>
  </ons-template>

could someone please advise on this issue?

any help would be apprecitaed.

Thanks in advance.

[Fran Diox]

@Jackson ons-splitter just wraps your app in a frame that gives you a side menu. It’s not its purpose to offer animations. For that, you will need to use ons-navigator. You can combine both as explained in the tutorial.

Also, resetToPage is navigator’s method, not splitter’s.

[Jackson]

@Fran-Diox said:

@Jackson ons-splitter just wraps your app in a frame that gives you a side menu. It’s not its purpose to offer animations. For that, you will need to use ons-navigator. You can combine both as explained in the tutorial.

Also, resetToPage is navigator’s method, not splitter’s.

Thank you for the reply. is there any way to hide that ‘scrollbar’ that appears at the bottom of the page between the page transitions?

maybe using jquery or CSS?

[Fran Diox]

@Jackson That only appears in Firefox. It’s hidden in devices, Chrome and Safari, I think.