一、动画

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'