vue-effect-page

Description

VUE-EFFECT-PAGE - It's VUE JS component for your projects, which allows you to add animation of the effect of switching pages in your SPA application.
There are a large number of different 3D effects that will make your application excellent.
Your users will appreciate it.

View DEMO

Install

npm install vue-effect-page

Usage

 import VueEffectPage from 'vue-effect-page'
Vue.use(VueEffectPage)

Wrap <router-view/> in an <vue-effect-page></vue-effect-page> component and set prop defaultEffect

<template>
  <div id="app">
    <vue-effect-page :defaultEffect="defaultEffect">
      <router-view/>
    </vue-effect-page>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      defaultEffect: 33
    }
  }
}
</script>

OR set up a unique effect for each route, for this add the property effect

 const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      effect: '1'// Specific code of effect or effect ID
    },
    {
      path: '/second-page',
      name: 'second-page',
      component: SecondPage,
      effect: '5'// Specific code of effect or effect ID
    },
    {
      path: '/random-page',
      name: 'random-page',
      component: RandomPage,
      effect: '25'// Specific code of effect or effect ID
    },
  ],
});

new Vue({
  el: '#app',
  render: h => h(App),
  router
});

---

Properties

Property	Required	Type	Default	Description
defaultEffect	false	Number, String	null	specific code of effect or effect ID

---

this.$effectPage

• setEffect: (routeName: String, effectID: String | Number) => void
  Method for programmatically assigning an effect to a route by the name of the route

 this.$effectPage.setEffect('second-page', 'move-to-left--from-right');

• current
  The object of the current effect for the current route

 this.$effectPage.current
  
// result: { id: '...', name: '...', code: '...', ... }

---

List of all effects

ID	Name	Code
1	Move to left/ from right	move-to-left--from-right
2	Move to right/ from left	move-to-right--from-left
3	Move to top/ from bottom	move-to-top--from-bottom
4	Move to bottom/ from top	move-to-bottom--from-top
5	Fade / from right	fade---from-right
6	Fade / from left	fade---from-left
7	Fade / from bottom	fade---from-bottom
8	Fade / from top	fade---from-top
9	Fade left / Fade right	fade-left---fade-right
10	Fade right / Fade left	fade-right---fade-left
11	Fade top / Fade bottom	fade-top---fade-bottom
12	Fade bottom / Fade top	fade-bottom---fade-top
13	Different easing / from right	different-easing---from-right
14	Different easing / from left	different-easing---from-left
15	Different easing / from bottom	different-easing---from-bottom
16	Different easing / from top	different-easing---from-top
17	Scale down / from right	scale-down---from-right
18	Scale down / from left	scale-down---from-left
19	Scale down / from bottom	scale-down---from-bottom
20	Scale down / from top	scale-down---from-top
21	Scale down / scale down	scale-down---scale-down
22	Scale up / scale up	scale-up---scale-up
23	Move to left / scale up	move-to-left---scale-up
24	Move to right / scale up	move-to-right---scale-up
25	Move to top / scale up	move-to-top---scale-up
26	Move to bottom / scale up	move-to-bottom---scale-up
27	Scale down / scale up	scale-down---scale-up
28	Glue left / from right	glue-left---from-right
29	Glue right / from left	glue-right---from-left
30	Glue bottom / from top	glue-bottom---from-top
31	Glue top / from bottom	glue-top---from-bottom
32	Flip right	flip-right
33	Flip left	flip-left
34	Flip top	flip-top
35	Flip bottom	flip-bottom
36	Fall	fall
37	Newspaper	newspaper
38	Push left / from right	push-left---from-right
39	Push right / from left	push-right---from-left
40	Push top / from bottom	push-top---from-bottom
41	Push bottom / from top	push-bottom---from-top
42	Push left / pull right	push-left---pull-right
43	Push right / pull left	push-right---pull-left
44	Push top / pull bottom	push-top---pull-bottom
45	Push bottom / pull top	push-bottom---pull-top
46	Fold left / from right	fold-left---from-right
47	Fold right / from left	fold-right---from-left
48	Fold top / from bottom	fold-top---from-bottom
49	Fold bottom / from top	fold-bottom---from-top
50	Move to right / unfold left	move-to-right---unfold-left
51	Move to left / unfold right	move-to-left---unfold-right
52	Move to bottom / unfold top	move-to-bottom---unfold-top
53	Move to top / unfold bottom	move-to-top---unfold-bottom
54	Room to left	room-to-left
55	Room to right	room-to-right
56	Room to top	room-to-top
57	Room to bottom	room-to-bottom
58	Cube to left	cube-to-left
59	Cube to right	cube-to-right
60	Cube to top	cube-to-top
61	Cube to bottom	cube-to-bottom
62	Carousel to left	carousel-to-left
63	Carousel to right	carousel-to-right
64	Carousel to top	carousel-to-top
65	Carousel to bottom	carousel-to-bottom
66	Sides	sides
67	Slide	slide