gu-fan / vue-edge-check

Check Browser Edge Reactively:sparkles:

vue-edge-check

English / 中文

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

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 ✨

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

vue-edge-check's Issues

在vue2.5，iphone7plus的微信公共号中使用会出现闪烁

// 修复IOS滑动效果
import EdgeCheck from 'vue-edge-check'
Vue.use(EdgeCheck, {edge_duration: 1000})

我在App.vue 中使用

<template>
  <div id="app">
    <transition name="slide">
      <!-- <navigation> -->
      <!--<keep-alive>-->
      <div :class="{'is-edge-back':$isEdgeLeft,'is-edge-forward':$isEdgeRight}">
        <router-view></router-view>
      </div>
      <!--</keep-alive>-->
      <!-- </navigation> -->
    </transition>
    <loading v-model="isLoading"></loading>
    <share-dialog v-show="showShare"></share-dialog>
  </div>
</template>

<script>
  import {Loading} from 'vux'
  import {mapGetters} from 'vuex'

  export default {
    name: 'App',
    components: {
      Loading
    },
    computed: {
      ...mapGetters({
        showShare: 'showShare',
        isLoading: 'isLoading'
      })
    }
  }
</script>

<style lang="scss">
  // 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);
  }
</style>

How can I use this with Nuxt.js?

Thanks for the plugin. Can I use this with Nuxt.js?

I've added this to my /plugins folder?

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

And this in my nuxt.config.js:

plugins: [
    ...
    { src: '@/plugins/vue-edge-check.js', ssr: false }
  ],

However It's still not taking effect and Vue is complaining about:

Property or method "$isEdgeRight" is not defined on the instance but referenced during render.

When I use it on my component like this:

<div class="flex flex-col ..." :class="{'is-edge-back':$isEdgeLeft,'is-edge-forward':$isEdgeRight}">

What am I missing?