过渡

Vue的过渡效果是通过给操作改变元素的css类别实现的，Vue给过渡定义了两种过程：显示/进入过渡(enter)与隐藏/离开过渡(leave)，这两种过程分别有过渡前、过渡后和过渡中三个状态，如图：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

使用vue.js的过渡时，需要给过渡元素的外层包裹transition盒子，并指定该过渡的name属性。具体的例子如下：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity .5s;
        }

        .fade-enter,
        .fade-leave-to

        /* .fade-leave-active below version 2.1.8 */
            {
            opacity: 0;
        }

        .fade-move-enter-active {
            transition: all ease 1s;
        }

        .fade-move-leave-active {
            transition: all ease 3s;
        }

        /*         隐藏时的效果
 */
        .fade-move-enter,
        .fade-move-leave-to {
            opacity: 0;
            transform: translateX(20px);
        }
    </style>
    <script src="vue.js"></script>
</head>

<body>
    <div id="demo">
        <button v-on:click="show = !show">
            Toggle
        </button>
        <transition name="fade">
            <p v-show="show">hello</p>
        </transition>
        <button v-on:click="show1 = !show1">
            Toggle
        </button>
        <transition name="fade-move" mode="">
            <p v-show="show1">hello</p>
        </transition>
    </div>
    <script>
        new Vue({
            el: '#demo',
            data: {
                show: true,
                show1: true
            }
        })
    </script>
</body>

动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。官网的例子：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bounce-enter-active {
            animation: bounce 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        }

        .bounce-leave-active {
            animation: bounce 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) reverse;
        }

        @keyframes bounce {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.5);
            }

            100% {
                transform: scale(1);
            }
        }
    </style>
    <script src="vue.js"></script>
</head>

<body>
    <div id="example-2">
        <button @click="show = !show">Toggle show</button>
        <transition name="bounce">
            <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at
                lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
        </transition>
    </div>
    <script>
        new Vue({
            el: '#example-2',
            data: {
                show: true
            }
        })
    </script>
</body>

指令

内置指令

内置指令部分在之前已经介绍得差不多了，还有两个指令——ref和v-cloak，简单介绍一下：

自定义指令

自定义指令可以实现在所有Vue实例上生效（全局指令）或在某个Vue实例内生效（局部指令）。

自定义全局指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

自定义局部指令

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

钩子函数

自定义指令提供了以下的钩子回调函数，他们代表的动作如下：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。钩子函数的可选参数如下：
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

Vue全家桶学习笔记（二）——过渡、动画效果和指令

过渡

动画

指令

内置指令

自定义指令

自定义全局指令

自定义局部指令

钩子函数