Vue中通过jQuery控制元素滚动到可视区才显示

methods:{
  /** 添加动画效果 */
  aniCom(ele, posit, leng1, leng2) {
    $(window).scroll(function () {
      let winTop = $(window).scrollTop()
      $(ele).each(function () {
        if ($(this).offset().top < winTop + $(window).height()) {
          $(this).css({
            opacity: 1,
            [posit]: leng1,
            transitionDuration: '1.2s'
          })
        } else if ($(this).offset().top - $(window).height() >= winTop) {
          $(this).css({
            opacity: 0,
            [posit]: leng2,
            transitionDuration: '1.2s'
          })
        }
      })
    })
  }
}

mounted() {
  this.$nextTick(() => {
    this.aniCom($('.animate'), 'bottom', '104px', '0px')
    this.aniCom($('.vip'), 'top', '50%', '70%')
    this.aniCom($('.text'), 'bottom', '54px', '0')
  })
}