更新记录

1.0（2022-10-15） 下载此版本

创建

平台兼容性

基本使用：在 App.vue 文件内引入js及样式文件，并在onLaunch事件中执行。

<script>
    import pageAnimation from "@/static/pageAnimation/animation.js"
    export default {
        onLaunch: function() {
            pageAnimation();
        },
    }
</script>

<style>
    @import url("/static/pageAnimation/css.css");
</style>

特殊配置：

在初始化执行时可传入配置参数，如

let pageFun = pageAnimation({
    durationIn:300,
    durationOut:300,
    mode:"",
    auto:true,
    except:[]
})

参数：

durationIn：数字，进动画时长。须要与css文件中定义的动画transition值一致

durationOut：数字，出动画时长。须要与css文件中定义的动画transition值一致

mode：字符串，动画名称。与css文件中定义的动画名一致，如left、right

auto：布尔值，自动模式，自动启动页面进动画。默认开启

except：字符串数组，排除动画拦截的API名称。可选navigateTo、redirectTo、reLaunch、switchTab、navigateBack。

• 函数执行后返回一个数据对象，包含两个执行函数：_pageShow、_pageHide。数据对象可挂载至全局变量供页面后续使用。

• 初始化配置如果关闭自动模式（关闭则同时不会监听浏览器前进后退事件），则须要在每个页面的onShow事件内手动执行_pageShow开启页面进动画（不执行页面就不会显示了）。

  _pageShow接受两个参数：mode动画名称、duration动画时长（与css文件中定义的动画transition值一致）。覆盖初始参数，可用于给页面定义不同的进动画。

  _pageHide接受两个参数：mode动画名称、duration动画时长（与css文件中定义的动画transition值一致）。暂时用不到

• except用于排除uni API拦截，排除后使用对应API进行页面跳转则不会出现进出动画，格式必须是一个字符串的数组。

• 使用已拦截的API进行页面跳转时，可在参数对象中加入animation对象属性，覆盖初始参数，可用于给当前跳转定义不同的进出动画（开启了自动模式则durationIn有效）。如：

uni.navigateTo({
    url: '/pages/page3/page3',
    animation:{
        mode:"",
        durationIn:300,
        durationOut:300
    }
})

动画定义：

在css文件内可自定义动画样式、动画名称，需要包含base、before、after、in、out这5个样式（base与after的含义相同），格式可参照上下文的其他动画样式。注意不要改变这几个样式的排序，会影响样式优先级。

其他事项：

• 动画功能参考自 page-animation（猫猫猫猫）。

• 动画由uni官方拦截器addInterceptor实现，支持vue2、vue3。

• 动画仅支持H5端能够使用。

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

• 浏览器的前进后退功能不会被拦截，因而不会触发页面的进、出动画（自动模式下已监听事件并启动页面的进动画，手动模式则须要在页面onShow事件内才能启动进动画）。暂时没有解决方案，也不打算解决。

• 暂不确定添加复数个拦截器后是否会产生冲突