Edit in JSFiddle

var MainLayout = {
  view: function (vnode) {
    var attrs = vnode.attrs;
    return m('.main', [
      m('nav', 'fake menu ...'),
    	m('h1', {class: 'page-title'}, attrs.title),
			m(attrs.page),
    ]);
  },
};

var Page1 = {
  onbeforeremove: function(vnode) {
    vnode.dom.classList.add("up");
    
    return new Promise(function(resolve) {
      setTimeout(resolve, 1000);
    })
  },
  view: function() {
    return m('.activity-view', [
      m("a[href=/page2]", {oncreate: m.route.link}, "Page 2"),
    ]);
  },
};

var Page2 = {
  view: function() {
    return m('.activity-view', [
      m("a[href=/]", {oncreate: m.route.link}, "Page 1"),
    ]);
  },
};

m.route(document.body, '/', {
  '/': {
      render: () => [
        m(MainLayout, {
          page: Page1,
          title: 'This is Page 1',
        })
      ],
    },
  '/page2': {
      render: () => [
        m(MainLayout, {
          page: Page2,
          title: 'This is Page 2',
        })
      ],
    },
});

body {
  outline: 1px dashed green;
  min-height: 200px;
}

.activity-view {
  transition: transform 1s ease;
}

.activity-view.up {
  transform: translateY(-100%);
}