【OnsenUI】画面遷移とアニメーションの設定方法

画面遷移の方法

main.js

if (page.id === 'page1') {
  page.querySelector('#switch_button').onclick = function() {
    document.querySelector('#myNavigator').pushPage('page2.html',slide);
  };
} else if (page.id === 'page2') {
  page.querySelector('#return_button').onclick = function() {
    document.querySelector('#myNavigator').popPage(slide);
  };
};

画面遷移には、pushPage popPageメソッドを使用します。
引数に、あらかじめ作成したページとアニメーションを指定します。(popPageにはアニメーションのみ)

アニメーションの設定

main.js

const slide = {
  animation: 'slide',onTransitionEnd: function(){}
};

animationには以下の４つが用意されています。

• slide
• lift
• fade
• none

参考文献

OnsenUIの基礎-OnsenUI