vue要求div进入到可视区域后，执行指定自定义动画效果。

/**
* @Author: 858834013@qq.com
* @Name: scrollingAnimation
* @Date: 2022-10-20
* @Desc:
*/
<template>
  <div class="scrollingAnimation" :class="{scaleDraw:show}" ref="scrollingAnimation">
    <slot></slot>
  </div>
</template>

<script>

export default {
  name: "scrollingAnimation",
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      show: false
    }
  },
  watch: {},
  mounted() {
    window.addEventListener('scroll', this.scrollToTop)
  },
  methods: {
    scrollToTop() {
      const offset = this.$refs.scrollingAnimation.getBoundingClientRect();
      var clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      console.log(offset)
      console.log(offset.top - clientHeight)
      if (offset.top - clientHeight < 200) {
        this.show = true
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.scrollingAnimation {
  transform: scale(1);
}

.scaleDraw {
  -webkit-animation-name: scaleDraw; /*关键帧名称*/
  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
  -webkit-animation-iteration-count: 1; /*动画播放的次数*/
  -webkit-animation-duration: 2s; /*动画所花费的时间*/
  /*可以简写为*/
  /* animation: scaleDraw 5s ease-in-out infinite; */
  /* -webkit-animation: scaleDraw 5s ease-in-out infinite; */
}
@keyframes scaleDraw {
  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(0.5); /*开始为原始大小*/
  }
  100% {
    transform: scale(1);
  }
}

</style>