关于前端:Vue中通过jQuery控制元素滚动到可视区才显示

31次阅读

共计 540 个字符，预计需要花费 2 分钟才能阅读完成。

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')
  })
}

正文完