npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-flyroutes

v1.1.2

Published

Vue Fly Routes is a small and easy-to-use VueJS router plugin that helps you create fluid and smooth transitions between your website’s pages.

Downloads

12

Readme

Intro

Vue Fly Routes is a small and easy-to-use VueJS router plugin that helps you create fluid and smooth transitions between your website’s pages.

It helps to control the transitions between your views, improves your site navigation and enhance your users' web experience.

Inspired by Barba.js, with all the power of Vue.

Demo

Vue Fly Routes Site


Notice: the next content assumes intermediate knowledge of VueJS, Vue Router, CSS and JavaScript. It is worth mentioning that all code examples use ES6+ syntax. If you are not comfortable with this syntax, we would encourage you to grasp the basics then come back.

Installing

To install vue-flyroutes you must previously install vue-router, then you can continue with the following steps:

NPM - Vue Cli / Node:

npm i vue-flyroutes --save

Then import it inside your /src/main.js file, and use it on your vue instance.

//...
import Vue from 'vue'
import { VueFlyRoutes } from 'vue-flyroutes'

Vue.use(VueFlyRoutes, {
  //Options...
})

It is recommended to use it globally, but you can install it as a component.

import { FlyTransitions } from 'vue-flyroutes'

//...
components: {
  FlyTransitions
}
//...

CDN - Window:

SOON...

Markup & Component placement

VueFlyRoutes registers the fly-transitions component that allows you to handle all transitions on your SPA route change.

To use it, just place it on your App component template:

<template>
  ...
  <fly-transition/>
  ...
</template>

Or you can mount it on your /src/main.js file:

import Vue from 'vue'
import {VueFlyRoutes, FlyTransitions } from 'vue-flyroutes'
import App from './App.vue'

Vue.use(VueFlyRoutes, {
  //Options...
})

new Vue({
  el: '#app',
  render: (h) => h(FlyTransitions, [h(App)])
}).$mount()

Then you have to do nothing, the component is now mounted in your app root.

Using with slot:

If you want to transition just the content inside the component, you must wrap your router-view component and all the components you want manipulate.

<template>
  ...
  <fly-transitions>
    <router-view/>
    <foo-comp/>
  <fly-transitions/>
  ...
</template>

Transitions

In the options, the most important thing you will use is transitions.

Note: You can run VFR with almost no configuration, later we'll show you the option references.

A transition run between two pages of your site, and VFS takes advantage of vue-router to handle route changes in a smooth way and maintains the continuity and aesthetics of your websites.

What is a transition?

Transitions are objects that contain the cofiguration and the lifecycle hooks (handler functions) to manage animations when there is a page change on your website. You must specify your transitions on the plugin installation and you can place as many as you want.

See how the lifecycle works.

A basic transition is made of a leave animation, that is executed when leaving the current page, and an enter animation that is executed when entering the next page:

Vue.use(VueFlyRoutes, {
  transitions: [
    {
      name: 'basic',
      leave(done) {
        myLeaveAnimation()
        done()
      },
      enter() {
        myEnterAimation()
      }
    }
  ]
})

Note: This animations will be triggered on all your pages.

You must see the Advanced transitioning props.

Animation

The important part for a good transition is animation. As VFS is not an animation plugin, you will need to import one in order to animate elements on the interface to create your transition.

There is a lot of javascript animation libraries on the web, here is a good start:

  • gsap — professional-grade animation for the modern web
  • popmotion — simple libraries for delightful interfaces
  • animejs — a lightweight library with a simple and powerful API
  • mojs — the motion graphics toolbelt for the web
  • spirit — the ultimate tool to create high-quality animations directly in the browser

For the demonstration, here is a basic opacity transition with animejs that consist of making the current page transparent, while the next page become opaque:

Vue.use(VueFlyRoutes, {
  transitions: [
    {
      name: 'animejs',
      async leave(done) {
        await anime({
          targets: '.content',
          delay: 1000,
          opacity: [0, 1],
          duration: 2000,
        }).finished;
        done()
      },
      enter() {
        anime({
          targets: '.content',
          delay: 0,
          opacity: [1, 0],
          duration: 2000,
        });
      }
    }
  ]
})

Note: VFS is currently only capable of transitioning with direct DOM manipulation. Soon will be available the data object in each lifecycle hook, that contains the element that is called through the :fly-trantision prop, also the data object contains the data of the whole transition.

Advanced Transitioning

SOON...

Plugin Options

SOON...

Lifecycle

SOON...

License

MIT License

Copyright © Crawford

Full license