【技术实现步骤摘要】
本专利技术涉及网页开发，尤其涉及一种基于vue的页面间动画切换方法、系统和设备。
技术介绍
1、vue提供了一个路由机制，可管理和控制应用程序中的页面导航。在vue应用程序中，页面跳转是非常常见的操作，但是简单的页面跳转会给用户带来不好的体验。
2、为了提高用户体验和页面交互性，往往需要在页面之间添加一些动画效果，vue路由跳转动画的实现方法有很多种，现有的vue路由器并不支持路由切换动画。意味着在vue.js应用程序中进行路由切换时，用户无法感知到页面的变化，会给用户带来不好的使用体验；不仅影响了网站的整体美感，也会降低用户使用的满意度和留存时间；用户更容易产生焦虑和不满，从而导致流失率增加。另外，缺乏路由跳转动画可能使用户混淆和误解页面结构，特别是当页面过于复杂或包含多个子页面时，容易让用户迷失在页面中无法自拔，增加用户学习成本和操作难度；如果想实现路由跳转动画需要在路由守卫中手动编写过渡效果，则比较繁琐。
技术实现思路
1、有鉴于此，本专利技术提供了一种基于vue的页面间动画切换方法、系统和设备，以解决现有技术中用户因无法感知到页面的变化，使用体验差、无法根据需求选择不同的过渡效果等的技术问题。
2、第一方面，本专利技术提供了一种基于vue的页面间动画切换方法，包括：
3、s1.安装vue-router插件，引入vue.js框架与vue路由器，创建vue.js应用程序；
4、s2.在所述vue.js应用程序中在vue应用程序中注
5、s3.根据用户自定义，进行路由切换动画组件的transition属性配置，为所述路由切换动画组件设置css3动画样式；
6、s4.在所述vue.js应用程序中配置路由器的过渡效果
7、s5.基于所述路由器的过渡效果，在所述vue.js应用程序中定义路由组件和所述路由切换动画组件，获得动画效果；
8、s6.采用测试工具测试所述动画效果，并将测试成功的css3动画样式，使用所述路由组件和路由切换动画组件在所述vue.js应用程序中进行页面跳转。
9、进一步地，所述路由切换动画组件的transition属性配置采用json对象格式。
10、进一步地，所述css3动画样式为复合动画序列。
11、进一步地，影响过度效果的函数包括动画时长函数、延迟函数和缓动函数，动画时长函数、延迟函数和缓动函数的调整采用图形用户界面工具，以便用户直观调整动画参数。
12、进一步地，还包括在所述路由切换动画组件的创建或销毁时触发动画效果，使用vue.js生命周期钩子函数。
13、进一步地，所述路由切换动画组件的transition属性配置，是在用户配置界面进行的，其中，所述用户配置界面使用响应式设计。
14、进一步地，所述用户配置界面提供动画效果的预览功能。
15、进一步地，所述动画效果测试包括使用所述测试工具模拟用户交互和浏览器行为。
16、第二方面，本专利技术提供了一种基于vue的页面间动画切换系统，包括：创建模块、添加模块、配置模块、过渡模块、定义模块和跳转模块，
17、所述创建模块，用于安装vue-router插件，引入vue.js框架与vue路由器，创建vue.js应用程序；
18、所述添加模块，用于在所述vue.js应用程序中在vue应用程序中注册路由器，并添加路由切换动画组件，其中，所述路由切换动画组件包括两个子组件为进入子组件和离开子组件；
19、所述配置模块，用于根据用户自定义，进行路由切换动画组件的transition属性配置，为所述路由切换动画组件设置css3动画样式；
20、所述过渡模块，用于在vue.js应用程序中配置路由器的过渡效果；
21、所述定义模块，用于基于所述路由器的过渡效果，在所述vue.js应用程序中定义路由组件和所述路由切换动画组件，获得动画效果；
22、所述跳转模块，用于将所述路由器的过渡效果进行动画效果测试，并将测试成功的所述css3动画样式，使用所述路由和路由组件在所述vue.js应用程序中进行页面跳转。
23、第三方面，本专利技术提供了一种计算机设备，包括存储器、处理器以及存储在所述存储器中并且可以在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现所述基于vue的页面间动画切换方法的步骤。
24、本专利技术与现有技术相比存在的有益效果是：
25、1.本专利技术通过在vue.js应用程序中进行路由切换后，使得用户感知到页面的变化，给用户带来较好的使用体验，增加了用户粘性；
26、2.本申请通过使用vue.js和css3的路由切换动画实现框架，设置进入和离开路由的过渡方式，实现了根据需求选择不同的过渡效果；
27、3.本专利技术不仅提升了网站的整体美感，还增加了用户使用的满意度和留存时间，避免了流失率增加以及降低了用户学习成本和操作难度。
本文档来自技高网...【技术保护点】
1.一种基于Vue的页面间动画切换方法，其特征在于，包括：
2.根据权利要求1所述的基于Vue的页面间动画切换方法，其特征在于，
3.根据权利要求1所述的基于Vue的页面间动画切换方法，其特征在于，
4.根据权利要求3所述的基于Vue的页面间动画切换方法，其特征在于，影响过度效果的函数包括动画时长函数、延迟函数和缓动函数，动画时长函数、延迟函数和缓动函数的调整采用图形用户界面工具，以便用户直观调整动画参数。
5.根据权利要求1所述的基于Vue的页面间动画切换方法，其特征在于，还包括在所述路由切换动画组件的创建或销毁时触发动画效果，使用Vue.js生命周期钩子函数。
6.根据权利要求1所述的基于Vue的页面间动画切换方法，其特征在于，所述路由切换动画组件的transition属性配置，是在用户配置界面进行的，其中，所述用户配置界面使用响应式设计。
7.根据权利要求6所述的基于Vue的页面间动画切换方法，其特征在于，所述用户配置界面提供动画效果的预览功能。
8.根据权利要求1所述的基于Vue的页面间动
9.根据权利要求1-8任一项所述的基于Vue的页面间动画切换方法实施的系统，其特征在于，包括：创建模块、添加模块、配置模块、过渡模块、定义模块和跳转模块，
10.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并且可以在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至8中任一项所述基于Vue的页面间动画切换方法的步骤。
...【技术特征摘要】
1.一种基于vue的页面间动画切换方法，其特征在于，包括：
2.根据权利要求1所述的基于vue的页面间动画切换方法，其特征在于，
3.根据权利要求1所述的基于vue的页面间动画切换方法，其特征在于，
4.根据权利要求3所述的基于vue的页面间动画切换方法，其特征在于，影响过度效果的函数包括动画时长函数、延迟函数和缓动函数，动画时长函数、延迟函数和缓动函数的调整采用图形用户界面工具，以便用户直观调整动画参数。
5.根据权利要求1所述的基于vue的页面间动画切换方法，其特征在于，还包括在所述路由切换动画组件的创建或销毁时触发动画效果，使用vue.js生命周期钩子函数。
6.根据权利要求1所述的基于vue的页面间动画切换方法，其特征在于，所述路由切换动画组件的transiti...
【专利技术属性】
技术研发人员：蒋海，郝丕煜，
申请(专利权)人：布比北京网络技术有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。