前端：鼠标下拉，图片由大变小动画

先要给要边的图片或者dom元素设置css的trainsion

比如 transion:height 2s ease;width 2s ease

再在js里面设置，在这里比较关键的点是，要在刚开始获取dom元素的时候给dom元素高度，代码示例如下+注解，

function handleScroll() { //方法

  const Bigbanner = document.getElementById("rc-6015990465875328") //获取dom

  Bigbanner.style.width = "64%"; //dom动画结束的宽

  Bigbanner.style.height = "205rem"; //dom动画结束的高

}

// 页面渲染完成

setTimeout(()=>{//模仿宏任务

   const Bigbanner = document.getElementById("rc-6015990465875328");//获取dom元素

   Bigbanner.style.height = "650rem" //要先给dom元素设置高，最好是dom元素原本的高度，之前用的是Bigbanner,style.height=Bigbanner.offsetheight+"px"，但是不知道为什么，有时候可以，有时候不可以，所以还是用固定高度吧。这个必须加，不加的话是看不到动画效果的。

   Bigbanner.addEventListener("transitionend",()=>{ //监听动画

      document.getElementById("rc-6015990465875328").remove() //当动画执行完毕，清除这个dom元素

   })

   let page = document.querySelector('.rc-page') //这两排主要是监听这个容器产生的滚动事件

   page.addEventListener("scroll", handleScroll);

})