（vue）js平移动画

完成效果

首先来上图看看效果，主要利用css配合js代码完成，主要利用dom元素的margin值来进行移动

 

 body代码

给了两张图来进行移动，绑定了一个ref属性，主要是为了在onMouted中取得这个dom元素

  <div >
          <img
            class="top_img3" ref="top_i"
            src="https://pic1.58cdn.com.cn/nowater/fangfe/n_v2010c079db1d642bfb2ceb387ec15726c.png"
            alt=""
          />
          <img
          ref="top_i"
            class="top_img4"
            src="	https://pic7.58cdn.com.cn/nowater/fangfe/n_v27f88c22e100a4724a3140b7c90f070b2.jpg"
            alt=""
          />
        </div>

css代码

.top_img3 {
      float: left;
      width: 295px;
      height: 113px;
      margin: 262px 0px 262px 19px;
      opacity: 1;
    }
    .top_img4 {
      float: right;
      width: 767px;
      height: 571px;
      margin: 32px -221px 0px;
      opacity: 1;
    }

js代码

let intanseHeight=ref(0)
// 获取元素
onMounted(()=>{
    // 获取当前dom
  const instance = getCurrentInstance()
//   获取当前元素距离顶部的高度，加上200这个margin
  intanseHeight=instance?.refs.top_i.offsetTop+200;
      // 监听滚动事件
      window.addEventListener('scroll', handleScroll)
})
let flag2=ref(true)
const handleScroll = () => {
    if(flag2.value){
        let img3=document.getElementsByClassName("top_img3")[0];
    let img4=document.getElementsByClassName("top_img4")[0]
    // 获取滚动条的高度
      const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
    //   判断滚动条的高度加上dom元素的高度是不是大于等于窗口的实际高
      if((scrollTop+intanseHeight)>=window.document.documentElement.offsetHeight){
        flag2.value=false;
        console.log('高度达到了');
        let time1=null;
        let begin=19;
        let begin2=-221;
        time1=setInterval(()=>{
            begin+=20;
            begin2+=40;
            if(begin==119||begin2==0){
                clearInterval(time1)
                time1=null;
            }
            img3.style.marginLeft=begin+'px'
            img4.style.marginRight=begin2+'px'
        },50)
      }
    }else {
        return false
    }
   
    }

分析代码：

在vue3中的生命周期函数中，触发监听事件，封装一个handleScroll函数来监听滚动条的滚动

 // 监听滚动事件

     window.addEventListener('scroll', handleScroll)

在封装的handleScroll函数中，主要用定时器要完成平移的平滑度

flag2判断是否执行过，页面加载完成后只执行一次

if(flag2.value){

获取dom元素

        let img3=document.getElementsByClassName("top_img3")[0];

    let img4=document.getElementsByClassName("top_img4")[0]

    // 获取滚动条的高度

      const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;

    //   判断滚动条的高度加上dom元素的高度是不是大于等于窗口的实际高

      if((scrollTop+intanseHeight)>=window.document.documentElement.offsetHeight){

        flag2.value=false;

        console.log('高度达到了');

        let time1=null;

        let begin=19;

        let begin2=-221;

        time1=setInterval(()=>{

            begin+=20;

            begin2+=40;

判断margin是不是要移动到的那个位置，是的话就清楚定时器

            if(begin==119||begin2==0){

                clearInterval(time1)

                time1=null;

            }

            img3.style.marginLeft=begin+'px'

            img4.style.marginRight=begin2+'px'

        },50)

      }

    }else {

        return false

    }