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

miox-animate

v1.1.1

Published

miox-animate

Downloads

12

Readme

Miox-animate

Miox 动画引擎

使用方法:

import MioxCore from 'miox-core';
import Router from 'miox-router';
import Animate from 'miox-animate';
import { engine, webview } from 'miox-vue';

const Ro = new Router();

Ro.patch('/', async ctx => {
    await ctx.render(indexPage);
});

Ro.patch('/list', async ctx => {
    await ctx.render(listPage);
});

MioxCore(async app => {
    app.set('animate', Animate());
    app.set('engine', engine);
    app.use(Ro.routes());
});

class indexPage extends webview {
    constructor(el){
        super(el);
    }

    template(){
        return `<p v-forward patch="/list">Click to list page</p>`;
    }
}

class listPage extends webview {
    constructor(el){
        super(el);
    }

    template(){
        return `<p v-backward>Back to index page</p>`
    }
}

注意事项:

动画引擎本身已经经过优化,但是由于安卓机器对dom渲染能力有限,如果webview中有大量的dom,在切换回来时会发生白屏/卡顿现象,优化方案:

  • 改为 fade 动画, app.set('animate', Animate({effect: 'fade'}));
  • 对于dom较多的页面,如果边切换动画边渲染,低端机可能会有性能问题。可以将新的webview先放置空的loading,等待 webview:in 方法之后再进行初始化。