滚动条滚动到指定位置，元素执行动画

创建一个组件，自己起一个名字

<template>
  <div ref="scroll">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'GanAnimate',
  props: {
    direction: {
      type: String,
      default: 'left'
    }
  },
  data() {
    return {}
  },
  mounted() {
    // 监听window滚动条
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      // this.$refs.scroll.getBoundingClientRect().y指的是当前元素的y轴的位置
      // window.innerHeight是当前浏览器窗口的可视高度
      if (this.$refs.scroll.getBoundingClientRect().y < window.innerHeight) {
        this.$refs.scroll.classList.add('animate-' + this.direction)
      } else {
        this.$refs.scroll.classList.remove('animate-' + this.direction)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.animate-left {
  animation: Aleft 1s ease 1;
}
@keyframes Aleft {
  0% {
    transform: translateX(-200px);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}
.animate-right {
  animation: Aright 1s ease 1;
}
@keyframes Aright {
  0% {
    transform: translateX(200px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
.animate-top {
  animation: Atop 1s ease 1;
}
@keyframes Atop {
  0% {
    transform: translateY(-300px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.animate-bottom {
  animation: Abottom 0.8s ease 1;
}
@keyframes Abottom {
  0% {
    transform: translateY(-150%);
  }
  40% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20%);
  }
  60% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

在需要用到的地方导入组件

import GanAnimate from '@/components/animate/index'
components: {
    GanAnimate
 },

// 使用方式：direction可以传4个值（left默认，right，bottom，top）
<div class="container">
   <gan-animate direction="left">
      <div class="circle"></div>
   </gan-animate>
</div>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 1500px;
  display: flex;
  align-items: flex-end;
  .circle {
    height: 100px;
    width: 100px;
    background-color: gray;
    border-radius: 50%;
  }
}
</style>