[發明專利]基于編程語言為Vue創建動畫效果的方法以及電子設備

在審

• 申請號: 201910145231.4
• 申請日: 2019-02-27
• 公開（公告）號: CN109976755A
• 公開（公告）日: 2019-07-05
• 發明（設計）人: 孫悅;李天馳
• 申請（專利權）人: 深圳點貓科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 廣東良馬律師事務所 44395
• 代理人: 李良

本發明公開基于編程語言為Vue創建動畫效果的方法以及電子設備，其包括步驟：獲取Vue的目錄層次信息和路由層次信息，并判斷兩者是否一致；當目錄層次信息和路由層次信息一致時，為Vue中的路由組件添加transition組件，并設置transition組件中的進入動畫效果和離開動畫效果；獲取所述路由組件的根節點，并修改根節點的定位方式；監聽所述路由組件，并獲取所述路由層次信息，并根據所述路由層次信息使用進入動畫效果和離開動畫效果。通過本發明提供的方法，能夠根據Vue的目錄層次信息和路由層次信息添加transition組件，從而設置進入動畫效果和離開動畫效果，再根據路由組件的根節點，對比路由深度，選擇相應的進入動畫效果或選擇相應的離開動畫效果。

技術領域

本發明涉及編程語言領域，尤其涉及基于編程語言為Vue創建動畫效果的方法以及電子設備。

背景技術

Vue(Vue項目)是一套構建用戶界面的漸進式框架，Vue采用自下向上增量開發的設計，其核心庫只關注視圖層，易于上手；同時Vue可以驅動單文件組件和由Vue生態系統庫開發的復雜單頁應用。簡單來說，在傳統web開發中，搭建的項目都以html結構為基礎，然后通過jquery或者js來添加各種特效功能，需要去選中每一個元素進行命令，這些內容在簡單的項目中或者不變的項目中能夠完美應付，一旦項目改動或者項目工程較大，則需要對原代碼進行大量地修改，但通過Vue便能解決上述問題。再例如，一些單網頁制作成的編程語言，一般涉及到數據交互的內容較廣，而通過Vue能夠將大大縮減工作量。

Vue除了能夠解決上述問題，還可提供一些動畫效果，使得用戶在使用編程語言時，更加流暢，消除卡頓的缺陷。

然而，Vue提供的web方案為單頁面方案，hybird只支持多頁面的路由切換動畫效果，沒有提供單頁面的路由切換動畫效果。

也就是說，現有Vue提供的動畫切換方案較為單一，無法滿足眾多用戶的需求。

因此，現有技術還有待于改進和發展。

發明內容

鑒于上述現有技術的不足，本發明的目的在于提供基于編程語言為Vue創建動畫效果的方法以及電子設備，旨在解決現有Vue提供的動畫切換方案較為單一的問題。

本發明的技術方案如下：

一種基于編程語言為Vue創建動畫效果的方法，其包括步驟：

A、獲取Vue的目錄層次信息和路由層次信息，并判斷兩者是否一致；

B、當目錄層次信息和路由層次信息一致時，為Vue中的路由組件添加transition組件，并設置transition組件中的進入動畫效果和離開動畫效果；

C、獲取所述路由組件的根節點，并修改根節點的定位方式；

D、監聽所述路由組件，并獲取所述路由層次信息，并根據所述路由層次信息使用進入動畫效果和離開動畫效果。

所述的基于編程語言為Vue創建動畫效果的方法，其中，所述步驟A之前具體包括：

配置Vue的路由組件信息，所述路由組件信息具體為路由組件的路徑和路由組件的名稱；

定義路由組件的跳轉函數，并定義所述跳轉函數的共用參數。

所述的基于編程語言為Vue創建動畫效果的方法，其中，所述步驟B包括：

當目錄層次信息和路由層次信息不一致時，發送相應的錯誤警告。

所述的基于編程語言為Vue創建動畫效果的方法，其中，所述步驟C具體包括：

C1、獲取所述路由組件的根節點，并獲取根節點的當前定位方式；