更新记录

1.0.0（2023-11-15） 下载此版本

提交插件

平台兼容性

page-transitions

uni-app H5端窗口动画/页面切换动画插件

说明

• 可选择多种动画切换效果，可自由定制增加动画效果;
• 可全局配置动画效果, 也可自定义单页动画效果;
• 首次打开页面或刷新时，不使用动画切换效果;

使用方式

1. 在 App.vue 文件内引入函数, 在onLaunch中调用;
2. 在 config.js 文件内配置全局参数或单页面参数;

// App.vue
import { registerTransitions } from './plugins/page-transitions/index.js';

export default {
    onLaunch: function() {
        registerTransitions(this);
    }
}

// config.js
// H5页面全局动画配置
export const defaultAnimate = {
  // 全局动画效果
  animateName: 'slide-in-right',
  // 全局进入动画
  isIn: true,
  // 全局离开动画
  isOut: true
};

// H5页面自定义动画配置
export const pageAnimateConfig = [{
  // 自定义页面路径
  path: '/pages/test',
  // 自定义进入动画
  animateName: 'slide-in-left',
  // 自定义进入动画
  isIn: false,
  // 自定义离开动画
  isOut: false
}]

动画类型

slide-in-right，slide-in-left，slide-in-top，slide-in-bottom，fade-in，zoom-fade-in;

注意事项

1. 当前页面动画仅支持H5端;
2. 当前动画使用了 transform，会导致页面内元素的 fixed 定位失效，尽管在动画完毕后会移除，但仍然会在页面动画期间产生影响;
3. 可能会对webview组件产生影响;