How to set direction animation when page open like in demo main page?
In the demo, the opening of pages goes from right to left, but in my project from the bottom to the top.
<template id="page-add-pet" >
<f7-page>
<f7-navbar title="About" back-link="Back"></f7-navbar>
<f7-block-title>About My App</f7-block-title>
<f7-block strong>
<p>Here is About page!</p>
<p>You can go <f7-link back>back</f7-link>.</p>
<p>Mauris posuere sit amet metus id venenatis. Ut ante dolor, tempor nec commodo rutrum, varius at sem. Nullam ac nisi non neque ornare pretium. Nulla mauris mauris, consequat et elementum sit amet, egestas sed orci. In hac habitasse platea dictumst.</p>
<p>Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.</p>
</f7-block>
</f7-page>
Vue.component('page-add-pet', {
template: ‘#page-add-pet’
});
// Init App
var app = new Vue({
el: ‘#app’,
data:
function () {
return {
// Framework7 parameters here
f7params: {
root: ‘#app’, // App root element
id: ‘io.framework7.testapp’, // App bundle ID
name: ‘Framework7’, // App name
theme: ‘auto’, // Automatic theme detection
panel: {
swipe: ‘left’,
},
// App routes
routes: [
{
path: ‘/add-pet/’,
component: ‘page-add-pet’
},
