• 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'
  • 相关阅读:
    idea主题更换pycharm/intellij
    随机生成n张扑克牌。
    JAVA生成6个1-8的随机数,要求无重复。
    一道简单 的循环
    linux虚拟机互访
    linux中grep命令
    vi和vim编辑器
    文件压缩打包以及备份
    文件内容查询
    目录相关操作
  • 原文地址:https://www.cnblogs.com/yijisi/p/11253690.html
Copyright © 2020-2023  润新知