网站首页 » 前端开发 » Vue » Vue2 导航切换过渡动画
上一篇:
下一篇:

Vue2 导航切换过渡动画

前言

Vue 导航切换过渡动画很常用,页面使用上了过渡动画,用户体验更上一层楼,Vue 的过渡动画内容不多,但是我们可以通过它来实现很多不同的动画效果,它主要是配合 CSS 样式来实现动画效果的。下面我们就来看看 Vue 的导航切换时的过渡动画。

Vue 动画之旅

首先们来先来看一个比较简的示例,我们直接在App.vue 根组件中写代码:

App.vue
<template>
  <div id="app">
    <ul>
      <li><router-link to="/">主页</router-link></li>
      <li><router-link to="/about">关于</router-link></li>
    </ul>
   <transition mode="out-in"> 
    <router-view/>
   </transition>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

<style>
.v-enter {
  opacity: 0;
}
.v-enter-to {
  opacity: 1;
}
.v-enter-active {
  transition: 0.2s;
}
.v-leave {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-leave-active {
  transition: 0.2s;
}
</style>

我们要想实现导航切换效果,至少要做两件事:

1、用<transition></transition> 标签把 <router-view /> 标签包裹起来。

2、定义必要的样式。

上面 <transition></transition> 标签中的  mode=”out-in” 属性是用来设置两个组件(页面)切换时的先后顺序的。如果不设置这个 mode 属性的话,那么两个组件会同时开始,一个组件离开,一个组件进入。你可以根据实践情况来进行设置。

对于样式类名,我们可以修改类名的前缀(即上例中的 v ),可以把它改成你希望的名字,但后面字符串(-enter)是不可以改的。比如我们把上面的类名修改下:

.run-enter {
  transform: translateX(100%);
}
.run-enter-to {
  transform: translateX(0);
}
.run-enter-active {
  transition: 0.2s;
}
.run-leave {
  transform: translateX(0);
}
.run-leave-to {
  transform: translateX(-100%);
}
.run-leave-active {
  transition: 0.2s;
}

此时你就需要选择 <transition></transition> 标签,你的类名是什么。

<transition name="run" mode="out-in"> 
  <router-view/>
</transition>

如果我们想做到:当用户从左到右点击导航和从右到左点击导航时,页面的滑出滑入方向不一样,这个要怎么做呢?

App.vue
<template>
  <div id="app">
      <div class="container">
          <nav class="navbar navbar-default">
              <div class="navbar-header">
                <a class="navbar-brand" href="#">云库网</a>
              </div>
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <router-link to="/" tag="li" exact><a>首页</a></router-link>
                    <router-link :to="m.url" tag="li" v-for="m in menus" :key="m.id"><a>{{m.name}}</a></router-link>
                </ul>
              </div>
          </nav>
          <transition :name="run" mode="out-in"> 
            <router-view/>
          </transition>
      </div>
  </div>
</template>
<script>
const menus = [
  { id: 1, name: "Angular", url: "/angular" },
  { id: 2, name: "html5", url: "/html5" },
  { id: 3, name: "关于", url: "/about" }
];
export default {
  name: "App",
  data() {
    return {
      menus,
      run: "left"
    };
  },
  watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        this.run = "right";
      } else {
        this.run = "left";
      }
      console.log(from);
    }
  }
};
</script>
<style>
.left-enter {
  transform: translateX(100%);
}
.left-enter-to {
  transform: translateX(0);
}
.left-enter-active {
  transition: 0.2s;
}
.left-leave {
  transform: translateX(0);
}
.left-leave-to {
  transform: translateX(-100%);
}
.left-leave-active {
  transition: 0.2s;
}
.right-enter {
  transform: translateX(-100%);
}
.right-enter-to {
  transform: translateX(0);
}
.right-enter-active {
  transition: 0.2s;
}
.right-leave {
  transform: translateX(0);
}
.right-leave-to {
  transform: translateX(100%);
}
.right-leave-active {
  transition: 0.2s;
}
.container {
  overflow: hidden;
}
</style>

再来看看路由配置:

router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Html5 from '@/components/Html5'
import Angular from '@/components/Angular'
import About from '@/components/About'

Vue.use(Router)
export default new Router({
  linkActiveClass: 'active',
  routes: [{
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        index: 1
      }
    },
    {
      path: '/angular',
      name: 'Angular',
      component: Angular,
      meta: {
        index: 2
      }
    },
    {
      path: '/html5',
      name: 'Html5',
      component: Html5,
      meta: {
        index: 3
      }
    }, {
      path: '/about',
      name: 'About',
      component: About,
      meta: {
        index: 4
      }
    }
  ]
})

效果看起来就像这样:

Vue 导航切换过渡动画

我们给导航中的每一个菜单对应的路由都添加一个 index 属性来确定它们之间的位置关系。然后通过 watch 来动态修改<transition></transition> 标签中的 name 属性。从而实现不同动作用不同的切换效果。

主面是主要的两个文件,其它的文件比如:路由对应的组件文件我就不贴出来了。因为就上面这两个文件就可以说明问题。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/vue-transition/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END