vue-router过渡动画

Posted 2022-05-19 yijisi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-router过渡动画相关的知识，希望对你有一定的参考价值。

一、动画

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‘

以上是关于vue-router过渡动画的主要内容，如果未能解决你的问题，请参考以下文章