I have a vertical list of messages and I want to implement swipe to dismiss, just like how Gmail does it where you swipe left to right and when you release, it deletes the message, but I also want it to fade progressively as you swipe. I don't think Swiper is truly built for this usecase but I feel like it should be doable with the exposed APIs. Currently, my component is structured like so:

// component.vue
<div v-for="message in messages"></div>
  <swiper @slideChange="foo">
    <swiper-slide>
      <message :message="message"></message>
    </swiper-slide>
  </swiper>
<div>

So each message is rendered within a swiper instance, essentially a carousel with 1 item. How would I go about doing this? I think we need to fire an event on swipe to start the fade effect, and another event on touchEnd and check how far the message was slided, and if it is past a certain threshold, apply an animation to make slide all the way off the screen.