vue路由----动画transition，watch监控动画

1.在idea中新建vue项目

2.main.js中修改

// 基础动画
import transition from './transition.vue'
import Vue from 'vue'
new Vue({
  el:'#demo',
  render:xx  =>  xx(transition)
})

3.src下新建文件transition.vue

<template>
    <div>    <!--模版中必须有一个这样的根元素-->
        <button v-on:click="show =! show">show/hide content</button>
        <transition name="fade">
            <p v-if="show">I love vue!!!</p>
        </transition>
    </div>
</template>

<script>
    export default {
        name: 'demo',
        data () {
          return{
            show:true
          }
        }
    }
</script>

<style scoped>   /*scoped作用域，表示只允许vue文件使用，否则便是全局*/
    .fade-enter-active , .fade-leave-active{
      transition: opacity .5s
    }
  .fade-enter , .fade-leave-active{
      opacity: 0
  }
</style>

注意vue组件在main.js 中导入时要加上.vue，引入js文件时可以省略.js

4.index.html中添加

<div id="demo"></div>

只添加这一句就行

运行结果：

vue路由中添加动画：
main.js中修改：
注释基础动画代码，新建文件transitionRouter.js并引入

import Vue from 'vue'
// import Router from './Router'     /*引用自同级Router.js*/
// import Router from './SonRouter'     /*引用自同级SonRouter.js*/
// import Router from './ComponentRouter'     /*引用自同级ComponentRouter.js*/
// import Router from './UrlRouter'
// import Router from './GrandSonRouter'
// import Router from './redirectRouter'
import Router from './transitionRouter'



// 基础动画
// import transition from './transition.vue'
//
// new Vue({
//   el:'#demo',
//   render:xx  =>  xx(transition)
// })

/*

新建transitionRouter.js文件：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const Home = {
  template:`
    <div>
      <h2>Home</h2>
      <p>this is Home</p>
</div>
  `
}
const Parent = {
  template:`
    <div>
      <h2>Parent</h2>
      <p>this is Parent</p>
</div>
  `
}

const router = new VueRouter({
  mode:'history',
  base: __dirname,
  routes:[
    {path:'/',component:Home},
    {path:'/Parent',component:Parent},
  ]
})

new Vue({
  router,
  template:`
  <div id="app">
    <h1>this is transition</h1>
    <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/Parent">/Parent</router-link></li>
    </ul>
    <transition name="fade" mode="out-in">
        <router-view></router-view>
    </transition>
</div>
  `
}).$mount('#app')

为添加CSS路由样式，在index.html的style中添加：

.fade-enter-active , .fade-leave-active{
        transition: opacity .5s
      }
      .fade-enter , .fade-leave-active{
        opacity: 0
      }

最后查看结果：

watch监控动画：
修改transitionRouter.js,添加watch监控，绑定name

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const Home = {
  template:`
    <div>
      <h2>Home</h2>
      <p>this is Home</p>
</div>
  `
}
const Parent = {
  template:`
    <div>
      <h2>Parent</h2>
      <p>this is Parent</p>
</div>
  `
}

const router = new VueRouter({
  mode:'history',
  data(){
    return{
      aaa:'fade'
    }
  },
  base: __dirname,
  routes:[
    {path:'/',component:Home},
    {path:'/Parent',component:Parent},
  ]
})

new Vue({
  router,
  template:`
  <div id="app">
    <h1>this is transition</h1>
    <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/Parent">/Parent</router-link></li>
    </ul>
    <transition :name="aaa" mode="out-in">
        <router-view></router-view>
    </transition>
</div>
  `,
  watch:{
      '$route' (to,from){
          console.log(to);
          console.log(from);
          if(from.path == '/Parent'){
            this.aaa = 'fade1';
          }else{
            this.aaa = 'fade2';
          }
      }
  }
}).$mount('#app')

样式在index.html中进行修改:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vuetest</title>
    <style>
      .red{
        color: red;
      }
      .green{
        color: green;
      }
      a.router-link-active{
        color: #f66;
      }
      li.router-link-active{
        color: #f66;
      }
      .fade1-enter-active , .fade1-leave-active{
         transition: opacity .5s
       }
      .fade1-enter , .fade1-leave-active{
        opacity: 0
      }
      .fade2-enter-active , .fade2-leave-active{
        transition: background 0.5s ease-in,color 0.3s ease-out
      }
      .fade2-enter , .fade2-leave-active{
        background-color: #F6F6F6;
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <div id="demo"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

最终效果：

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_44010187/article/details/95197628
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-01 22:46:28
阅读 ( 954 )
分类：前端

vue路由----动画transition，watch监控动画

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看