为 webApp 提供转场特效的开源 Vue 插件

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

VUEG

为vue-router添加转场效果，只需要Vue.use(vueg)，即可获得转场效果，并能够根据url深度(/)和历史记录判断是前进和后退。

效果图

live demo | GitHub

项目实战效果：

使用方法

0、安装

npm

i vueg -G

1、引入插件

import

Vue from 'vue'

import

App from './App'

import

router from './router'

 

// 

↓↓↓↓↓↓↓↓↓↓↓↓

import

vueg from 'vueg'   

import

'vueg/css/transition-min.css'

Vue.use(vueg,

router)     //←注意这一句应该在router实例化(router

= new VueRouter()之后 

现在，app已经具备默认的转场特效能力了。

2、上添加v-transition=”false”，可以禁用动画，如：

配置项 Config

const

options={ 

      duration:

'0.3',             

//转场动画时长，默认为0.3，单位秒  

      firstEntryDisable:

false,    

//值为true时禁用首次进入应用时的渐现动画，默认为false 

      firstEntryDuration:

'.6',    

//首次进入应用时的渐现动画时长，默认为.6 

      forwardAnim:

'fadeInRight',  

//前进动画，默认为fadeInRight 

      backAnim:

'fadeInLeft',      

//后退动画，默认为fedeInLeft  

      sameDepthDisable:

false,     

//url深度相同时禁用动画，默认为false  

      tabs:

[{

              name:'home'

          },{

              name:'my'

          }],                      

//默认为[]，'name'对应路由的name,以实现类似app中点击tab页面水平转场效果，如tabs[1]到tabs[0]，会使用backAnim动画，tabs[1]到tabs[2]，会使用forwardAnim动画 

      tabsDisable:

false,          

//值为true时，tabs间的转场没有动画，默认为false 

      disable:

false,              

//禁用转场动画，默认为false，嵌套路由默认为true 

  } 

  Vue.use(vueg,

router,options)

forwardAnim 、 backAnim 提供以下值：

`touchPoint`

//页面从触摸点放大载入的转场效果  

     

以及animate.css中的值 

`bounce` 

`flash` 

`pulse` 

`rubberBand` 

`shake` 

`headShake` 

`swing` 

...略略略... 

`slideInDown` 

`slideInLeft` 

`slideOutDown` 

`slideOutLeft` 

`slideOutRight` 

`slideOutUp` 

预览效果，以及查看全部可用值，请访问：https://daneden.github.io/animate.css

options还可以在每个组件的data中配置，举例：

data(){

        return

{

            http://www.jqhtml.com/wp-content/uploads/2017/07/vuegConfig:{ 

                forwardAnim:'bounceInUp', 

//options所有配置可以写在这个对象里，会覆盖全局的配置

                disable:false             

//对于嵌套路由，默认为关闭动画，需要在组件的data.http://www.jqhtml.com/wp-content/uploads/2017/07/vuegConfig中配置disable为false启用

            }

    }

}

其他：

1、基于vue v2.3.4版本和webkit内核浏览器开发、调试；

2、非新项目使用这个插件后，因为css问题，可能造成原本元素在转场动画时有些地方排版错乱，那就需要调整css；

3、每个路由匹配的组件模板高度最好大于等于屏幕高度，否则转场不好看，可以为 添加class，设置min-height:100%;

4、插件20Kb左右大小,其中css 17Kb，如果想减小，可以编辑http://www.jqhtml.com/wp-content/uploads/2017/07/vueg/css/animate.css ，将不需要的动画样式删除，然后在vueg/下运行npm install-gulp css，即可；

5、配置项中forwardAnim 、 backAnim 的值本质上是css类名，所以你也可以自己写css动画，然后给定你自定义的类名作为值；

原文地址：https://github.com/jaweii/http://www.jqhtml.com/wp-content/uploads/2017/07/vueg#http://www.jqhtml.com/wp-content/uploads/2017/07/vueg

以上是 为 webApp 提供转场特效的开源 Vue 插件 的全部内容， 来源链接： utcz.com/z/375785.html

回到顶部