vue中实现滑出

vue中实现滑出效果

使用CSS过渡动画

在Vue中可以通过<transition>组件配合CSS实现滑出效果。定义一个从右侧滑入的动画：

<transition name="slide">
  <div v-if="show">需要滑出的内容</div>
</transition>

对应的CSS样式：

.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}

使用Vue过渡钩子

可以通过JavaScript钩子实现更复杂的滑出动画：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <div v-if="show">滑出内容</div>
</transition>

JavaScript方法：

methods: {
  beforeEnter(el) {
    el.style.transform = 'translateX(100%)'
  },
  enter(el, done) {
    const animation = el.animate(
      [{ transform: 'translateX(100%)' }, { transform: 'translateX(0)' }],
      { duration: 500 }
    )
    animation.onfinish = done
  },
  leave(el, done) {
    const animation = el.animate(
      [{ transform: 'translateX(0)' }, { transform: 'translateX(100%)' }],
      { duration: 500 }
    )
    animation.onfinish = done
  }
}

使用第三方动画库

引入第三方动画库如Animate.css可以快速实现滑出效果：

<transition
  enter-active-class="animate__animated animate__slideInRight"
  leave-active-class="animate__animated animate__slideOutRight"
>
  <div v-if="show">滑出内容</div>
</transition>

需要先安装并导入animate.css：

npm install animate.css

然后在main.js中引入：

import 'animate.css'

结合Vue路由实现页面滑出

在路由切换时实现页面滑出效果：

const router = new VueRouter({
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

添加路由过渡：

<router-view v-slot="{ Component }">
  <transition name="slide">
    <component :is="Component" />
  </transition>
</router-view>

对应的CSS：

.slide-enter-active {
  transition: transform 0.3s ease-out;
}
.slide-leave-active {
  transition: transform 0.3s ease-in;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}

移动端优化

针对移动端触摸滑动效果，可以结合touch事件：

<div 
  @touchstart="startDrag"
  @touchmove="onDrag"
  @touchend="endDrag"
  :style="{ transform: `translateX(${offsetX}px)` }"
>
  可滑动内容
</div>

JavaScript处理：

data() {
  return {
    startX: 0,
    offsetX: 0,
    isDragging: false
  }
},
methods: {
  startDrag(e) {
    this.startX = e.touches[0].clientX
    this.isDragging = true
  },
  onDrag(e) {
    if (!this.isDragging) return
    this.offsetX = e.touches[0].clientX - this.startX
  },
  endDrag() {
    this.isDragging = false
    if (Math.abs(this.offsetX) > 100) {
      // 触发滑出动画
    } else {
      this.offsetX = 0
    }
  }
}