vue3自定义指令——元素平滑移动

vue提供一个用户可以高度自定义的指令入口directives
利用这个入口我们实现一个常见的元素平滑移动的自定义指令 ‘sl’
首先我们结合指令创建一个多元素的界面：

这个场景我们在很多网站，商城都有见过，特别对于移动端的清单类界面
我们的终极目标是在滚动的过程中出现在视口的元素移动，而并不是所有的元素都在移动

平滑移动

有了目标之后我们就可以分解一下我们codeing的过程,

1. 创建一个基础的指令
2. 选则一个合适的方式去建立一个高效的运行动画
3. 如何获取到进入视口的元素
4. 找到视口元素并让它移动

s1创建一个基础的指令文件

//移动的距离
const DISTANCE : number = 150;

const derDve = {
   
    
    mounted(el:any){
   
    
    el.style.transform=`translateY(${
     DISTANCE}px)` 
  }
}
export default derDve

s2指令内容根据分解的需求变更

1. 指令使用的过程不应影响到原始元素的属性特征 el.style 方式会导致元素原有的样式出现变更
2. 指令的使用应该具有兼容性和高效的复用价值

动画方式创建一个平滑指令

const derDve = {
   
    mounted(el:any){
   
     //动画方式创建
    const animation = el.animate(