【给Swiper轮播时添加动画过渡效果】

需求

轮播时添加一个图片逐渐缩小,透明度逐渐降低的过渡效果

事件

给Swiper添加

//右滑动作
@slide-next-transition-start="($event) => NextTransionStart($event)"
//左滑动作
@slide-prev-transition-start="($event) => PrevTransionStart($event)"
//触摸图片
@touch-move="touchmove"
//手指离开图片
@touch-end="touchend"

//不用驼峰是因为代码检查过不去
//触摸动作是在不通过按钮进行轮播时触发的

按钮滑动事件

// 右滑
const NextTransionStart = (swiper) => {
  //获取当前图片,并缩小
  let endimg = swiper.slides[swiper.previousIndex].querySelector('img')
  endimg.style.opacity = 0;
  endimg.style.transform = 'scale(0.4)';
  endimg.style.transition = 'opacity 0.2s ease, transform 0.2s ease'
  //获取马上要滑动到的图片,并将他提前快速缩小.
  let starimg = swiper.slides[swiper.activeIndex].querySelector('img')
  starimg.style.opacity = 0;
  starimg.style.transform = 'scale(0.4)';
  starimg.style.transition = 'opacity 0.01s ease, transform 0.01s ease'

  //快速缩小之后,在缓慢的放大
  setTimeout(function(){
	starimg.style.opacity = 1;
    starimg.style.transform = 'scale(1)';
    starimg.style.transition = 'opacity 2s ease, transform 2s ease'
  },10)
}
//左滑也一样    复制一份就行
const PrevTransionStart = (swiper) => {
  //获取当前图片,并缩小
  let endimg = swiper.slides[swiper.previousIndex].querySelector('img')
  endimg.style.opacity = 0;
  endimg.style.transform = 'scale(0.4)';
  endimg.style.transition = 'opacity 0.2s ease, transform 0.2s ease'
  //获取马上要滑动到的图片,并将他提前快速缩小.
  let starimg = swiper.slides[swiper.activeIndex].querySelector('img')
  starimg.style.opacity = 0;
  starimg.style.transform = 'scale(0.4)';
  starimg.style.transition = 'opacity 0.01s ease, transform 0.01s ease'

  //快速缩小之后,在缓慢的放大
  setTimeout(function(){
	starimg.style.opacity = 1;
    starimg.style.transform = 'scale(1)';
    starimg.style.transition = 'opacity 2s ease, transform 2s ease'
  },10)
}

手动滑动事件

// 手指摁下
const touchmove = (event) => {
  let cx = event.touches.currentX;
  let sx = event.touches.startX;
  //滑动缩放倍率,可以根据自己情况调整
  let opacitynum = ((cx - sx)/2/188).toFixed(2)
  let scalenum = ((cx - sx)/2/130).toFixed(2)
  
  //展示动画
  let starimg = swiper.slides[swiper.activeIndex].querySelector('img')
  starimg.style.opacity = opacitynum ;
  starimg.style.transform = 'scale('+scalenum +')';
  starimg.style.transition = 'opacity 1s ease, transform 1s ease'
}

//手指松开
const touchend = (event) => {  
  //展示动画
  let starimg = swiper.slides[swiper.activeIndex].querySelector('img')
  starimg.style.opacity = 1;
  starimg.style.transform = 'scale(1)';
  starimg.style.transition = 'opacity 1s ease, transform 1s ease'
}

*转载请注明出处