创建自定义滚动指令

    2.   <h1 class="centered">Scroll me</h1>
    3.   <div
    4.     v-scroll="handleScroll"
    5.     class="box"
    6.   >
    7.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.</p>
    8.   </div>
    9. </div>

    记住！指令必须在 Vue 实例之前注册好。

    我们可能还需要一个样式属性来对中间值做过渡，在这个例子中：

    在 查看 Sarah Drasner (@sdras) 的。

    或者使用 GreenSock (GSAP) 或任何其它 JavaScript 动画库，代码会变得更加简洁：

    1. Vue.directive('scroll', {
    2.   inserted: function (el, binding) {
    3.       if (binding.value(evt, el)) {
    4.         window.removeEventListener('scroll', f)
    5.       }
    7.     window.addEventListener('scroll', f)
    8.   }
    9. })
    11. // main app
    12. new Vue({
    13.   el: '#app',
    14.   methods: {
    15.     handleScroll: function (evt, el) {
    16.       if (window.scrollY > 50) {
    17.         TweenMax.to(el, 1.5, {
    18.           opacity: 1,
    19.           ease: Sine.easeOut
    21.       }
    22.       return window.scrollY > 100
    23.     }
    24.   }
    25. })

    Vue 为指令提供了丰富的选项，覆盖了绝大多数的常见用例，使得我们可以通过指令创建非常高效的开发体验。即便遇到了一个框架本身覆盖不到的极端情况，你也可以通过这种方式来解决，因为你可以很轻松地创建一个自定义指令来满足需求。

    为元素附加或移除滚动事件是对于这项技术的一个很好的用例，因为就像其它我们使用的指令一样，它们有必要绑定在元素上，否则我们就需要寻找其 DOM 引用。这种模式避免了我们遍历 DOM 节点，保证事件的逻辑能够和需要引用的节点对应起来。

    在创建一个风格统一的网站的过程中，你可能会发现你在很多区域复用了相同类型的动画逻辑。看起来我们创建一个非常特殊的自定义指令很简单对吧？好，通常情况下如果你想复用它，那么你只需在每次使用的时候对其进行一些小的改动即可。

    为了保持代码的精炼和易读，我们会传递一些预设参数，诸如我们向下滚动页面时动画的起始点和终止点。

    在 CodePen 查看 Sarah Drasner () 的 滚动示例 - 在Vue中使用自定义指令</a。>

    在上述 demo 中，每个章节都有两个由滚动触发的不同类型的动画开关：一个渐变动画和一个动态改变 SVG 独立路径的动画。我们想要复用这两种动画，因此可以为每种动画各创建一个自定义指令。传入的参数将会帮助我们让一切都简单可复用。

    为了展示实现方式，我们将会看一下这个渐变图形的示例，这里我们需要明确起始状态和完成状态，同时传入一个我们将要创建的渐变的路径的值。每个这样的参数都会以 binding.value.foo 的形式定义：

    然后我们可以在我们的模板中使用这个动画，在本例中我们会将该指令附加到一个 clipPath 元素上，然后将所有的参数放入一个对象传递到这个指令中。

    1. <clipPath id="clip-path">
    2.   <path
    3.     v-clipscroll="{ start: '50', end: '100', toPath: 'M0.39 0.34H15.99V22.44H0.39z' }"
    4.     id="poly-shapemorph"
    5.     d="M12.46 20.76L7.34 22.04 3.67 18.25 5.12 13.18 10.24 11.9 13.91 15.69 12.46 20.76z"
    6.   />
    7. </clipPath>

    拥有一个非常丰富的生态系统，同时附带了很好的文档和演示以便大家浏览。这些特效包括且不仅限于诸如视差滚动、、章节切换和等。