Awesome

vue-edge-check

English / 中文

Check Browser Edge Reactively.To prevent transition effect triggered oddly when swipe edge with vue-router:sparkles:

Before

After

Why & How ?

You can swipe with edge gesture in iOS Safari/WKWebview/Wechat. The page will trigger history.back()/history.forward() after the page is sliding finished. then the transition animation of router will still triggering, that's redundant.

So we can check if we touch the edge when move back/forward, then block current transition effect :sparkles:

Install

npm install vue-edge-check

OR

yarn add vue-edge-check

Useage

Two Propery $isEdgeLeft 和 $isEdgeRight， Means touching left edge or right edge of page

can be used to define class in components

import and use

import EdgeCheck from 'vue-edge-check'
Vue.use(EdgeCheck)

define class

<template>
  <transition name="slide">
    <div class="test" :class="{'is-edge-back':$isEdgeLeft,'is-edge-forward':$isEdgeRight}">
      <h1>
          TEST
      </h1>
    </div>
  </transition>
</template>

define / block transition effect

// ORIGIN: set slide transition effect time
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s;
}

// ORIGIN: add slide transition effect
.slide-enter,
.slide-leave-to
{
  transform: translate3d(100%, 0, 0);
}

// EXTRA: this component should have no transition with edge forward/back
.is-edge-forward.slide-enter-active,
.is-edge-back.slide-leave-active
{
  transition: all 0s;
}

// EXTRA: this component should not display at slide-leave start
// or else it will blink
.is-edge-back.slide-leave,
{
  transform: translate3d(100%, 0, 0);
}

// EXTRA: this component should display and not move at slide-enter start
// or else it will jump
.is-edge-forward.slide-enter,
{
  transform: translate3d(0, 0, 0);
}

Options

edge_width: default: 48

the width of edge check

edge_duration: default: 500

the $isEdgeLeft/$isEdgeRight property lasting time, need a bit more than transition effect time

// in case if you have a longer transition effect
Vue.use(EdgeCheck, {edge_duration:1000})