难点在于页面滑动的监听。我们什么时候应该让购物车动画开始移动？页面滑到底部比较合适。动画是Adobeanimate导出的js文件。当时找了很久的控制停止和启动功能，终于被前辈们一键找到了。实现方法是监听页面滑动到底部，调用start函数。有条件的朋友可以导出一个动画试试，没有条件的可以直接去【动画动作】学习控制小方块的运动，达到学习的目的。window.onscroll=function(){varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;varwindowHeight=document.documentElement.clientHeight||document.body.clientHeight;varscrollHeight=document.documentElement.scrollHeight||document.body.scrollHeight;if(scrollTop+windowHeight==scrollHeight){document.getElementById("animation_container").classList.add("van");fnStartAnimation();}}动画动画就是小车在3S内移动到虚线在盒子里。抽象起来就是让一个正方形在3S内平移600px（看实际距离）然后停下来。想了想，实现了（CSS）：@keyframespeople{/*keyframesnameispeople*/from{transform:translateX(0px);/*起始位置为0*/}to{transform:translateX(-600px);/*结束位置是600*/}/*这个函数是让动画向左（原来是-）移动600px*/}的距离。van{animation-name:people;/*指定类van使用的关键帧名称为people*/animation-duration:2.2s;/*动画时长为2.2s*/animation-timing-function:linear;/*让动画从头到尾的速度相同，匀速变化*/animation-iteration-count:1;/*动画播放的次数为一次*/animation-fill-mode:forwards;/*动画播放完最后一帧停止*/}这篇文章的主要目的是告诉你如何提炼一个难题，让它变得更容易。完整的代码我没有放出来，但也希望和我一样的年轻人能够认真分析，大胆实践。作者：dei是小吴链接：https://juejin.im/post/5ec276b95188256d48709bc4来源：掘金版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。