一、动画
1、src路径下创建一个transition.vue文件如下：
1 <template> 2 <div> 3 <button v-on:click="show =! show">show/hide text</button> 4 <transition name="fade"> 5 <p v-if="show">Hello World!</p> 6 </transition> 7 </div> 8 </template> 9 10 <script> 11 export default { 12 name:"demo", 13 data(){ 14 return{ 15 show:true 16 } 17 } 18 } 19 </script> 20 21 <style scoped> /* scoped 样式只作用于.vue的文件 */ 22 .fade-enter-active,.fade-leave-active{ 23 transition: opacity 0.5s; 24 } 25 .fade-enter,.fade-leave-active{ 26 opacity:0; 27 } 28 </style>
2、src/main.js
import Vue from 'vue' import transition from './transition.vue' new Vue({ el:"#demo", render: x => x(transition) })
3、index.html中加入id为demo的div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>project1</title>
</head>
<body>
<div id="app">
</div>
<div id="demo">
</div>
<router-view></router-view>
<!-- built files will be auto injected -->
</body>
</html>
<script>
</script>
二、路由的动画
1、新建src/router4.js
1 import Vue from 'vue' 2 import VueRouter from 'vue-router' 3 Vue.use(VueRouter) 4 5 const Home={template:`<div>Home内容</div>`} 6 const parent={template:`<div>parent内容</div>`} 7 8 const router=new VueRouter({ 9 mode:'history', 10 base:__dirname, 11 routes:[ 12 {path:'/',component:Home}, 13 {path:'/parent',component:parent} 14 ] 15 }) 16 17 new Vue({ 18 router, 19 template:` 20 <div> 21 <p>hello</p> 22 <ul> 23 <li><router-link to="/">/</router-link></li> 24 <li><router-link to="/parent">parent</router-link></li> 25 </ul> 26 <transition name="fade" mode="out-in"> 27 <router-view></router-view> 28 </transition> 29 </div> 30 ` 31 }).$mount("#app")
2、在index.html中加入动画样式
<style> .fade-enter-active,.fade-leave-active{ transition: opacity 0.5s; } .fade-enter,.fade-leave-active{ opacity:0; } </style>
3、src/main.js
import Vue from 'vue'
import router from './router4.js'
