最近在学习使用Vue作为前端的框架，本文简单介绍Vue的过渡效果，以及记录制作首页的过程。

”

Vue事件

1方法处理器

● 可以用v-on指令监听DOM事件

● 类似于内联表达式，事件处理器限制为一个语句

● 当一个ViewModel被销毁时，所有的事件处理器都会自动被删除

● 有时也需要在内联语句处理器中访问原生DOM事件，可以用特殊变量$event把它传入方法

  <button v-on:click="say('hello!', $event)">Submitbutton>

2事件修饰符

Vue封装了常用的事件处理：

● .prevent： event.preventDefault()

● .stop： event.stopPropagation()

3按键修饰符

在监听键盘事件时，我们经常需要检测keyCode。

  on:keyup.13="submit">

Vue过渡

通过Vue.js的过渡系统，可以在元素从DOM中插入或移除时自动应用过渡效果。

Vue.js会在适当的时机为你触发CSS过渡或动画，你也可以提供相应的JavaScript钩子函数在过渡过程中执行自定义的DOM操作。

1使用过渡

在目标元素上使用transition特性。transition 特性可以与下面资源一起用：

● v-if

● v-show

● v-for(只在插入和删除时触发，使用vue-animated-list插件)

● 动态组件(is和切换组件)

● 在组件的根节点上，并且被Vue实例DOM方法(如vm.$appendTo(el))触发

当插入或删除带有过渡的元素时，Vue 将：

1. 尝试查找JavaScript过渡钩子对象——通过Vue.transition(id, hooks)或transitions选项注册，将在过渡的不同阶段调用相应的钩子。

2. 自动嗅探目标元素是否有CSS过渡或动画，并在合适时添加/删除CSS类名。

3. 如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM操作(插入/删除)在下一帧中立即执行。

2CSS过渡

● 过渡的CSS类名

• ● .name-transition: 始终保留在元素上

• ● .name-enter: 定义进入过渡的开始状态。只应用一帧然后立即删除

• ● .name-leave: 定义离开过渡的结束状态。在离开过渡开始时生效，在它结束后删除，当然配合css3的帧动画效果会更好。

我们这里的菜单展开/收起用的CSS过渡。

在目标元素上使用transition特性

<li v-for="item in menu.menus" v-show="menu.show" transition="staggered">{{ item.text }}li>

为.staggered-transition，.staggered-enter和.staggered-leave添加CSS规则：

.staggered-transition {    transition: all .2s ease-in-out;    overflow: hidden;    margin: 0;    height: 50px;}.staggered-enter, .staggered-leave {    height: 0px;    opacity: 0;    padding: 0;}

3JavaScript过渡

可以只使用JavaScript钩子，不用定义任何CSS规则。

当只使用JavaScript过渡时，enter和leave钩子需要调用done回调，否则它们将被同步调用，过渡将立即结束。

Vue.transition('fade', {  css: false, // Vue.js将跳过CSS检测  enter: function (el, done) {    // 元素已被插入 DOM    // 在动画结束后调用 done    $(el)      .css('opacity', 0)      .animate({ opacity: 1 }, 1000, done)  },  enterCancelled: function (el) {    $(el).stop()  },  leave: function (el, done) {    // 与 enter 相同    $(el).animate({ opacity: 0 }, 1000, done)  },  leaveCancelled: function (el) {    $(el).stop()  }})

然后用在transition特性中。

4渐变过渡

transition与v-for一起用时可以创建渐近过渡。

给过渡元素添加一个特性

stagger，enter-stagger或 eave-stagger

<div v-for="item in list" transition="stagger" stagger="100">div>

提供一个钩子stagger, enter-stagger或leave-stagger，以更好的控制

Vue.transition('stagger', {  stagger: function (index) {    // 每个过渡项目增加50ms延时    // 但是最大延时限制为300ms    return Math.min(300, index * 50)  }})

制作index页面

页面结构如下：

1添加模板

这里使用了上一节创建的头部组件，在component属性中引入。

<template>  <div is="my-header" current="index">div>  <div class="container-fluid row">  <aside class="col-md-2  col-md-offset-1" id="according">    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">      <div class="panel panel-default list-group" v-for="menu in asidemenus">        <div class="panel-heading" role="tab">          <ul class="panel-title ">            <li data-toggle="collapse" v-on:click="toggleContent($index)">              {{ menu.title }}            li>          ul>        div>        <div class="panel-collapse collapse in">          <ul class="list-group">            <li v-for="item in menu.menus" v-show="menu.show" transition="staggered" class="list-group-item" role="button" v-on:click.stop="changeLoading(item.click)">{{ item.text }}li>          ul>        div>      div>    div>  aside>  <article class="col-md-7">    <section class="index-content">      <p v-show="loading === 'init' || loading === 'name'">昵称：被删p>      <p v-show="loading === 'init' || loading === 'email'">邮箱：wangbeishan@163.comp>      <p v-show="loading === 'init' || loading === 'github'">github: <a href="https://github.com/godbasin">github.com/godbasina>p>      <div v-show="loading === 'sethead'">这里是修改头像页面div>      <div v-show="loading === 'setinfo'">这里是修改资料页面div>      <div v-show="loading === 'other'">这里是其他页面div>    section>  article>div>template>

2添加Vue组件

<script>// 导入Header组件import MyHeader from './Header.vue'export default {  components: { // 导入Header组件    MyHeader  },  data () {    return {      loading: 'init',      asidemenus: [{        title: '基本资料', // title用于储存该菜单显示名称        click: 'init', // click用于储存该菜单对应点击时loading的状态值        show: true, // show用于保存菜单是否隐藏的状态        menus: [{          text: '名字', // title用于储存该菜单显示名称          click: 'name' // click用于储存该菜单对应点击时loading的状态值        }, {          text: '邮箱',          click: 'email'        }, {          text: 'github',          click: 'github'        }]      }, {        title: '设置头像',        click: 'sethead',        show: true      }, {        title: '修改资料',        click: 'setinfo',        show: true      }, {        title: '其他',        click: 'other',        show: true      }]    }  },  // 在 `methods` 对象中定义方法  methods: {    changeLoading: function (view) { // 更新loading      this.loading = view    },    toggleContent: function (index) { // 过渡菜单效果并更新loading      this.asidemenus[index].show = !this.asidemenus[index].show      this.changeLoading(this.asidemenus[index].click)    }  }}script>

结束语

这里我们没有用到bootstrap中的组件，毕竟用Vue过渡很简单的呢。不得不说，Vue的动画过渡做的真的不错，事件的封装也做的很方便呢。

原文作者：腾讯高级工程师 王贝珊

  -前端好课-  

最热前端框架，晋升加薪必修技能

多项目迭代式教学，低门槛快速进阶高级工程师

若需了解更多，请扫码添加小助手咨询~

也可直接查找微信号：TencentNext

▲ NEXT学院 官方课程助教 ▲