vue中transition动态设置name属性左右切换

责编:menVScode 2017-12-06 11:47 阅读(884)

        了解vue过渡动画transition使用/过渡模式http://www.menvscode.com/detail/5a266cc010c98d0e654c1bca

        代码片段一

<template>
  <div id="app">
    <div class="nav-box">
      <ul class="f-cb">
        <li><router-link to="/" exact tag="div"  event="mouseover">home</router-link></li>
        <li><router-link :to="{path:'/document#abc'}" event="mouseover">document</router-link></li>
        <router-link to="/about" tag="li" event="mouseover">
          <i></i>
          <span>about</span>
        </router-link>
        <li><router-link to="/user" event="mouseover">user</router-link></li>
      </ul>
    </div>
    <div class="content f-cb" style="position:relative;">
      <transition mode="" name="left"><!--把想要过渡的组件放在transition标签内-->
        <router-view class="center" style="position: absolute;top:0;left:0;"></router-view>
      </transition>
    </div>
  </div>
</template>

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

<style>
  .v-enter{opacity: 0;}
  .v-enter-to{opacity: 1;}
  .v-enter-active{transition: 1s;} /*定义过渡时间*/
  .v-leave{opacity: 1;}
  .v-leave-to{opacity: 0;}
  .v-leave-active{transition: 2s;} 
  .left-enter{transform: translateX(100%)}/*100%代表在屏幕外*/
  .left-enter-to{transform: translateX(0)}
  .left-enter-active{transition:1s}
  .left-leave{transform: translateX(0)}
  .left-leave-to{transform: translateX(-100%)}
  .left-leave-active{transition:.5s}
</style>

        代码片段一效果

GIF3333


        代码片段二 

<style>
  .right-enter{transform: translateX(-100%)}/*-100%代表在屏幕外,屏幕的左边*/
  /* .right-enter-to{transform: translateX(0)}; */
  /* .right-leave{transform: translateX(0)} */
  .right-leave-to{transform: translateX(100%)}/*屏幕的右边*/
  .right-enter-active{transition:1s}
  .right-leave-active{transition:1s}
</style>

        将transition中name属性改为 right,代码片段二效果如下。

GIF4444

        

        代码片段三:动态设置name属性左右切换

App.vue

<template>
  <div id="app">
    <div class="nav-box">
      <ul class="f-cb">
        <li>
          <router-link to="/" exact tag="div"  event="mouseover">home</router-link>
        </li>
        <li>
          <router-link :to="{path:'/document#abc'}" event="mouseover">document</router-link>
        </li>
        <router-link to="/about" tag="li" event="mouseover">
          <i></i>
          <span>about</span>
        </router-link>
        <li>
          <router-link to="/user" event="mouseover">user</router-link>
        </li>
      </ul>
    </div>
    当前导航的下标:{{$route.meta}}
    <div class="content f-cb" style="position:relative;">
      <!-- <router-view name="slider"></router-view> 命名视图 -->
      <transition mode="" :name="names"><!--把想要过渡的组件放在transition标签内-->
        <router-view class="center" style="position: absolute;top:0;left:0;"></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return {
        index:'/home',job:'/job',
        names:'left'
      }
  },
  watch:{
    $route(to,from){ //导航发生变化,$route也就是会改变
      console.log(to.meta.index) //目标导航的下标
      console.log(from.meta.index) //离开导航的下标
      if(to.meta.index>from.meta.index){
        this.names = 'right'
      }else{
        this.names = 'left'
      }
    }
  }
}
</script>

<style>
  .left-enter{transform: translateX(100%)}/*100%代表在屏幕外*/
  .left-enter-to{transform: translateX(0)}
  .left-enter-active{transition:1s}
  
  .left-leave{transform: translateX(0)}
  .left-leave-to{transform: translateX(-100%)}
  .left-leave-active{transition:.5s}

  .right-enter{transform: translateX(-100%)}/*-100%代表在屏幕外,屏幕的左边*/
  /* .right-enter-to{transform: translateX(0)}; */
  /* .right-leave{transform: translateX(0)} */
  .right-leave-to{transform: translateX(100%)}/*屏幕的右边*/
  .right-enter-active{transition:1s}
  .right-leave-active{transition:1s}
</style>

router/index.js

let router = new VueRouter({
  mode:'history',//默认是hash模式
  linkActiveClass:'menvscode-active',
  scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。
    //console.log(to) // to:要进入的目标路由对象,到哪里去
    //console.log(from) // from:离开的路由对象,哪里来
    //console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
    /*if(savePosition) {
      return savePosition;
    }else{
      return {x:0,y:0}
    }*/
    if(to.hash){ //先判断目标路由有没有hash值
      return {selector:to.hash}
    }
  },
  routes:[
    {
      path:'/',
      name:'index',
      component:Home,
      meta:{ index:0 }
    },
    {
      path:'/home',
      name:'Home',//name代表当前的路由
      component:Home,
      alias:'/index' //当访问'/index'的时候,就能匹配到当前的路由了。
    },
    {
      path:'/document',
      name:'Document',
      meta:{ index:1 },
      components:{ // 多个视图的时候,默认渲染default的视图。
        default:Document,
        slider:Slider,
        home:Home
      }
    },
    {
      path:'/user/:tip?/:userId?',//?正则符号:userId/tip可以出现0次或者1次。这样就能匹配/user/vip/1或者/user
      name:'user',
      component:User,
      meta:{ index:3 }
    },
    {
      path:'/about',
      component:About,
      // meta:{ index:2 },
      children:[
        {
          path:'',//写''空值,代表默认子路由,相对于“/about”
          name:'About',
          component:Study,
          meta:{ index:2 },
        },
        {
          path:'/work',
          name:'Work',
          component:Work
        },
        {
          path:'/hobby',
          name:'Hobby',
          component:Hobby
        }
      ]
    },
    {
      path:'*',
      //component:Noweb
      //重定向
      //redirect:{path:'/home'}
      //redirect:{name:'Home'}
      redirect:(to)=>{
        console.log(to) //目标路由对象,就是访问路劲的路由信息
        if(to.path==='/123'){
          return './home'
        }else if(to.path==='/456'){
          return {path:'/Document'}
        }else{
          return {name:'About'}
        }
      }
    }
  ]
})

export default router

        效果展示

GIF55555

标签: transition vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码