wangbing
6 years ago
parent
391876e0d9
commit
bbe8f1c65e
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<#--baseJs-->
|
||||
<script src="${Uri.getUrl('/static/dist/lib.min.js')}" type="text/javascript"></script>
|
||||
<#--移动端ui-->
|
||||
<script src="${Uri.getUrl('/static/dist/mint-ui.min.js')}" type="text/javascript"></script>
|
||||
<link href="${Uri.getUrl('/static/dist/mint-ui.min.css')}" rel="stylesheet"/>
|
||||
<#--ajax接口-->
|
||||
<script src="${Uri.getUrl('/static/js/ajax.js')}" type="text/javascript"></script>
|
||||
<link href="${Uri.getUrl('/static/css/base.css')}" rel="stylesheet"/>
|
||||
<style>
|
||||
* {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
html,body,#app{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-in-right-out-enter-active, .left-in-right-out-leave-active {
|
||||
transition: all 0.3s linear;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.left-in-right-out-enter {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.left-in-right-out-leave-to {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.right-in-left-out-enter-active, .right-in-left-out-leave-active {
|
||||
transition: all .3s linear;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.right-in-left-out-enter {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.right-in-left-out-leave-to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.left-in-right-out-enter-active, .left-in-right-out-leave-active {
|
||||
transition: all 0.3s linear;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.left-in-right-out-enter {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.left-in-right-out-leave-to {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.right-in-left-out-enter-active, .right-in-left-out-leave-active {
|
||||
transition: all .3s linear;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.right-in-left-out-enter {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.right-in-left-out-leave-to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<transition :name="transitionName">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<template id="home">
|
||||
<div class="view">
|
||||
<mt-header title="Hello world">
|
||||
<router-link to="/" slot="left">
|
||||
<mt-button icon="back">返回</mt-button>
|
||||
</router-link>
|
||||
<mt-button icon="more" slot="right"></mt-button>
|
||||
</mt-header>
|
||||
<div class="content" style="text-align: center;padding-top: 200px">
|
||||
Hello world
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var router = new VueRouter({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: Vue.extend({template: '#home'})
|
||||
}
|
||||
]
|
||||
});
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
transitionName: ''
|
||||
},
|
||||
router: router,
|
||||
watch: {
|
||||
'$route': function (to, from) {
|
||||
this.transitionName = to.meta.index < from.meta.index ? 'left-in-right-out' : 'right-in-left-out'
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
@ -1,48 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<#--baseJs-->
|
||||
<script src="${Uri.getUrl('/static/dist/lib.min.js')}" type="text/javascript"></script>
|
||||
<#--vonic移动端ui-->
|
||||
<script src="${Uri.getUrl('/static/dist/vonic.min.js')}" type="text/javascript"></script>
|
||||
<link href="${Uri.getUrl('/static/dist/vonic.min.css')}" rel="stylesheet"/>
|
||||
<#--ajax接口-->
|
||||
<script src="${Uri.getUrl('/static/js/ajax.js')}" type="text/javascript"></script>
|
||||
<link href="${Uri.getUrl('/static/css/base.css')}" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<router-link to="/">首页</router-link>
|
||||
<router-link to="/next">next</router-link>
|
||||
<transition name="wb-zoom-in-top">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<template id="home"><div>home</div></template>
|
||||
<template id="next"><div>next</div></template>
|
||||
|
||||
<script>
|
||||
var router = new VueRouter({
|
||||
routes:[
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component:Vue.extend({template: '#home'})
|
||||
},
|
||||
{
|
||||
path: '/next',
|
||||
name: 'next',
|
||||
component:Vue.extend({template: '#next'})
|
||||
}
|
||||
]
|
||||
});
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
router:router
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in new issue