元素渐进滑入页面效果

效果：页面滑动的时候，进入视口的元素，有一个渐进滑入的动画。 知识：1.vue指令 2.transform改变元素的位置 3.js实现动画的方法通过 animate函数 4.IntersectionObserver 对象判断是否进入视口区域 有2个文件，一个是指令封装，一个代码实例，如下：

import Vue from 'vue'
const map = new WeakMap() //健只能是对象，并且健消失，在map里的引用消失
const ob = new IntersectionObserver((entry) => { // 是否进入视口
  console.log(entry)
  for (const item of entry) {
    const top = item.target.getBoundingClientRect().top
    console.log(top, window.innerHeight)
    if (item.isIntersecting && top < window.innerHeight) {
      const ani = map.get(item.target)
      ani.play()
      ob.unobserve(item.target)
    }
  }
})
function isBelowViewPort(el) {
  const top = el.getBoundingClientRect().top
  return top > window.innerHeight
}
const slide = Vue.directive('slide-in', {
  inserted: function (el) {
    if (!isBelowViewPort) {
      return
    }
    const animate = el.animate([
      {
        transform: 'translateY(40px)',
        opacity: 0.5
      },
      {
        transform: 'translateY(0)',
        opacity: 1
      }
    ],{
      duration: 1000,
      easing: 'ease'
    })
    map.set(el, animate)
    animate.pause()
    ob.observe(el)
  }
})
export default {
  slide
}

<template>
  <div>
    <div v-slide-in class="bgred size">1</div>
    <div v-slide-in class="bgyellow size">2</div>
    <div v-slide-in class="bggreen size">3</div>
    <div v-slide-in class="bgpurple size">4</div>
    <div v-slide-in class="bggray size">5</div>
    <div v-slide-in class="bgblue size">6</div>
    <div v-slide-in class="bgblack size">7</div>
    <div v-slide-in class="bgpink size">8</div>
  </div>
</template>
<style>
.size {
  width: 500px;
  height: 400px;
  margin-bottom:20px;
}
.bgred {
  background-color: red;
}
.bgyellow {
  background-color: yellow;
}
.bggreen {
  background-color: green;
}
.bgpurple {
  background-color: purple;
}
.bgblue {
  background-color: blue;
}
.bgblack {
  background-color: black;
}
.bggray {
  background-color: gray;
}
.bgpink {
  background-color: pink;
}
</style>