更新记录

1.1.2（2021-06-01）

添加多种页面动画效果，可自由添加动画效果

可设置独立的动画页面，根据需求不使用切换动画的页面 不设置即可

自动判断页面返回的切换动画

首次打开页面或刷新 不使用动画切换效果

平台兼容性

page-animation-pro

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

插件特性

• 可选择多种动画切换效果，可自由定制增加动画效果；
• 独立设置每个需要切换动画的页面(不设置的页面不会开启动画效果)；
• 自动判断页面是否返回(若页面是返回，则自动使用退出式动画效果)；
• 首次打开页面或刷新时，不使用动画切换效果；

使用方式

1. 在 App.vue 文件内 mixins 引入 page-animation 组件即可
2. 在 setting 文件内配置页面参数

// 引入 page-animation 组件
import pageAnimation from './components/page-animation-pro'
export default {
    mixins: [pageAnimation],
    onLaunch: function() {
        console.log('App Launch')
    }
}
//配置页面参数
export const pageIndexSetting = [
    {path:'pages/login/login',animaName:'slide-in-right',pageIn:false,pageOut:false},
    // {path:'',animaName:'',pageIn:,pageOut:},
]

动画类型：

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

注意事项

• 当前页面动画仅支持H5端
• 当前动画使用了 transform，会导致页面内元素的 fixed 定位失效，尽管在动画完毕后会移除，但仍然会在页面动画期间产生影响。

其他说明

本插件是在 page-animation 插件 (作者：猫猫猫猫)的基础上进行了升级。

• 插件还能进行优化，一些地方还未达到最佳，比如：插件里的变量参数我没放在data(){}里，是因为 this 的指向问题，无法获取或改动，可能是箭头函数原因所造成的，我尝试过，但不会解决；有哪位同学会，可以发到评论区或联系我改进。

• 由于uniapp的页面只在一个DIV里替换内容，所以页面切换效果就会比较单一。举个例子

  <!-- UNI-APP的框架构造是这样的 两个页面的内容在一个容器里替换  动画只能在一个DIV上展示效果-->
  <div id="app"> <div>页面_A 页面_B</div> </div>
  '
  <!-- 如果可以分别在两个容器里，动画效果就会更丰富更理想。-->
  <div id="app"> <div>页面_A</div> <div>页面_B</div> </div>
  <!-- 
  比如抽屉效果，当前页面是A，点击展示B页面，点击之后页面A向左移30%隐藏一半，页面B向左移70%显示一半
  这样两个页面同时存在一个 屏幕内，而且都是不同的动画效果
  -->

• 如果有兴趣的，可以写一个独立的组件，提一些思路，和官方的 navigator 组件一样，命名不冲突就好了，比如

  <u-navigator url="目标页" animation-type="动画名称" page-in="页面进入动画" page-out="页面退出动画">内容页</u-navigator>

  然后在需要跳转页面的地方使用此组件就好了。根据在组件上配置的参数进行页面动画操作，现在不会写组件，不然写个这样的独立组件是最好的。