{"id":19261580,"url":"https://github.com/ntnyq/vue-animation","last_synced_at":"2025-04-21T17:30:45.214Z","repository":{"id":97667843,"uuid":"152990246","full_name":"ntnyq/vue-animation","owner":"ntnyq","description":":dancer: Animation in Vuejs","archived":false,"fork":false,"pushed_at":"2025-04-21T06:15:14.000Z","size":751,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-21T07:35:12.499Z","etag":null,"topics":["animation","vue"],"latest_commit_sha":null,"homepage":"https://vue-animation.vercel.app","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ntnyq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-10-14T15:42:53.000Z","updated_at":"2025-04-21T06:14:44.000Z","dependencies_parsed_at":"2024-10-28T04:38:13.145Z","dependency_job_id":"c266f39a-8124-4429-99d4-08fe5a948a67","html_url":"https://github.com/ntnyq/vue-animation","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntnyq%2Fvue-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntnyq%2Fvue-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntnyq%2Fvue-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntnyq%2Fvue-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ntnyq","download_url":"https://codeload.github.com/ntnyq/vue-animation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250100224,"owners_count":21374899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","vue"],"created_at":"2024-11-09T19:27:37.415Z","updated_at":"2025-04-21T17:30:45.207Z","avatar_url":"https://github.com/ntnyq.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue 与动画\n\n\u003e VueJS 与动画。\n\n**！！！本文非原创，是对别人博文的学习笔记，加上自己的思考和写 Demo。原文章地址，请查看下面的参考资料。**\n\n# Table of Contents\n\n- [Vue 与动画](#vue与动画)\n  - [基本介绍](#基本介绍)\n    - [Transition 组件](#transition组件)\n    - [过渡实现的方式](#过渡实现的方式)\n    - [动画执行逻辑](#动画执行逻辑)\n  - [CSS 动画](#css动画)\n    - [transition 组件的钩子状态](#transition组件的钩子状态)\n    - [自定义动画类名](#自定义动画类名)\n    - [使用关键帧动画](#使用关键帧动画)\n    - [指定过渡持续时间](#指定过渡持续时间)\n    - [初试渲染的过渡](#初试渲染的过渡)\n  - [JS 动画](#js动画)\n    - [钩子函数](#钩子函数)\n    - [初始渲染](#初始渲染)\n  - [多元素组件动画](#多元素组件动画)\n    - [多元素动画](#多元素动画)\n    - [过渡模式](#过渡模式)\n    - [多组件过渡](#多组件过渡)\n  - [列表过渡](#列表过渡)\n    - [基本说明](#基本说明)\n    - [进入离开列表](#进入离开列表)\n    - [列表排序过渡](#列表排序过渡)\n    - [时间设置](#时间设置)\n      - [过渡延迟时间](#过渡延迟时间)\n      - [过渡持续时间](#过渡持续时间)\n  - [集成 Animate.css](#集成animatecss)\n    - [基本使用](#基本使用)\n  - [结合 Vue-router](#结合vue-router)\n    - [基本使用](#基本使用-1)\n    - [路由切换多种动画](#路由切换多种动画)\n  - [参考资料](#参考资料)\n\n## 基本介绍\n\n### Transition 组件\n\n1. 若某个元素或者组件需要有过渡效果，只需使用 Vue 内置的 `Transition` 组件将其包裹起来封装成过渡组件即可。\n2. Vue 只有在**插入**、**更新**和**销毁**元素或者组件时才会使用过渡效果。例如：\n   - v-if (条件渲染)\n   - v-show (条件展现)\n   - 动态组件\n   - 在组件的根节点上，并且被 Vue 实例的 DOM 方法触发。\n\n### 过渡实现的方式\n\n主要有以下两种过渡的实现方式：\n\n1. 利用 CSS 过渡 (`transition`) 或者关键帧动画 (`@keyframes`) 来实现。\n2. 利用 JavaScript 来实现(建议使用动画库，如 `animejs` )。\n\n### 动画执行逻辑\n\n过渡插件在触发过渡效果时，会进行如下操作：\n\n1. 检查过渡组件作用的元素上是否有 CSS 过渡动画或者关键帧动画，若有则在对应时刻进行调用。\n2. 若使用 JavaScript 的钩子函数来实现了动画，那么在合适的时机将调用 Js 完成动画。\n3. 若不存在动画，则下一帧执行 DOM 操作，完成组件的**插入**、**更新**或**销毁**。\n\n## CSS 动画\n\n### Transition 组件的钩子状态\n\n当我们给 Transition 组件设置一个 name 属性，例如 `\u003ctransition name=\"fade\"\u003e\u003c/transition\u003e`，那么在过渡组件发生过渡的时候，会有以下 6 个类名发生切换。\n\n- **v-enter-from** 进入过渡的开始状态，元素被插入或者组件刚创建的时候生效，在下一帧后立刻被删除。\n- **v-enter-active** 进入过渡的结束状态，元素被插入后即刻生效，在过渡完成后删除。\n- **v-enter-to** 定义进入过渡的结束状态，在元素被插入后下一帧生效（同时 `v-enter-from` 被删除）,在过渡/动画完成后删除。\n- **v-leave-from** 离开过渡的开始状态，元素被删除时候出发，只应用一帧后立刻删除。\n- **v-leave-active** 离开过渡的结束状态，元素删除后立即生效，离开过渡完成后删除。\n- **v-leave-to** 定义离开过渡的结束状态，在离开过渡被出发下一帧后生效（同时 `v-leave-from` 被删除），在过渡/动画完成后被删除。\n\n### 自定义动画类名\n\n可自定义以下类名:\n\n- `appear-from-class`\n- `appear-active-class`\n- `appear-to-class`\n- `enter-from-class`\n- `enter-active-class`\n- `enter-to-class`\n- `leave-from-class`\n- `leave-active-class`\n- `leave-to-class`\n\n自定义类名的权值大于普通类名，若对过渡组件指定了类型，则此状态的默认类名不会被触发。\n\n### 使用关键帧动画\n\n关键帧动画通过 CSS 定义 `animation` 属性与 `@keyframes` 来实现。\n一般只需需要在在 `xx-enter-active` 和 `xx-leave-active` 两个类上定义创建和销毁的动画。\n\n### 指定过渡持续时间\n\n在 `Transition` 组件上绑定 `duration` 属性即可指定过渡持续时间。单位为**毫秒**。\n\n```vue\n\u003ctemplate\u003e\n  \u003cTransition :duration=\"3000\" /\u003e\n\u003c/template\u003e\n```\n\n也可以传入对象的方式，分别指定进入和离开的持续时间：\n\n```vue\n\u003ctemplate\u003e\n  \u003cTransition :duration=\"{ entry: 2000, leave: 3000 }\"\u003e\n    \u003c!-- ... --\u003e\n  \u003c/Transition\u003e\n\u003c/template\u003e\n```\n\n### 初试渲染的过渡\n\n通过 `appear` 属性，可以设置元素初始渲染时候的过渡:\n\n\u003e 过渡只会在初始渲染时触发，重复改变其显示属性等不会触发过渡效果。\n\n```vue\n\u003ctemplate\u003e\n  \u003cTransition appear\u003e\n    \u003c!-- ... --\u003e\n  \u003c/Transition\u003e\n\u003c/template\u003e\n```\n\n它也可以指定类名:\n\n```vue\n\u003ctemplate\u003e\n  \u003cTransition\n    appear-class=\"custom-appear-class\"\n    appear-to-class=\"custom-appear-to-class\"\n    appear-active-class=\"custom-appear-active-class\"\n    appear\n  \u003e\n    \u003c!-- ... --\u003e\n  \u003c/Transition\u003e\n\u003c/template\u003e\n```\n\n## JS 动画\n\n### 钩子函数\n\n我们可以在`transition`组件上添加**钩子函数**，来监听过渡的执行过程，在合适的时机执行绑定在钩子函数上的 JS 动画，来实现过渡效果。需要注意的是：\n\n- 当只存在 JavaScript 动画时，必须在`leave`和`enter`中，调用其回调函数。否则他们将被同步调用，过渡会立即完成。(动画库会提供动画完成回调。比如`animejs`)\n- 对于只使用 JavaScript 的元素，建议添加`:css=\"false\"`来让 Vue 跳过对其的**CSS 检测**，同时也可以避免过渡过程受 CSS 影响。\n\n代码示例：\n\n```vue\n\u003cscript setup\u003e\nimport { ref } from 'vue'\n\nconst { log } = window.console\n\nconst isShow = ref(true)\n\n//* 进入过渡 */\n\n// 设置进入过渡之前的状态\nfunction beforeEnter(el) {\n  log('\u003e beforeEnter')\n}\n\n// 设置进入过渡完成时的状态\nfunction enter(el, done) {\n  log('\u003e enter')\n  done()\n}\n\n// 设置进入过渡完成后的状态\nfunction afterEnter(el) {\n  log('\u003e afterEnter')\n}\n\n// 只用于v-show中\nfunction enterCancelled(el) {\n  log('\u003e enterCancelled')\n}\n\n//* 离开过渡 */\n\n// 设置离开过渡之前的状态\nfunction beforeLeave(el) {\n  log('\u003e beforeLeave')\n}\n\n// 设置离开过渡完成时的状态\nfunction leave(el, done) {\n  log('\u003e leave')\n  done()\n}\n\n// 设置离开过渡完成后的状态\nfunction afterLeave(el) {\n  log('\u003e afterLeave')\n}\n\n// 只用于v-show中\nfunction leaveCancelled(el) {\n  log('\u003e leaveCancelled')\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton\n    @click=\"isShow = !isShow\"\n    type=\"button\"\n  \u003e\n    切换显示\n  \u003c/button\u003e\n\n  \u003cTransition\n    @before-enter=\"beforeEnter\"\n    @enter=\"enter\"\n    @after-enter=\"afterEnter\"\n    @enter-cancelled=\"enterCancelled\"\n    @before-leave=\"beforeLeave\"\n    @leave=\"leave\"\n    @after-leave=\"afterLeave\"\n    @leave-cancelled=\"leaveCancelled\"\n  \u003e\n    \u003cLsBox v-show=\"isShow\" /\u003e\n  \u003c/Transition\u003e\n\u003c/template\u003e\n```\n\n### 初始渲染\n\n对于 JS 钩子函数，Vue 同样也提供了初始渲染的钩子函数，调用方式如下：\n\n```vue\n\u003ctemplate\u003e\n  \u003cTransition\n    @before-appear=\"beforeAppear\"\n    @appear=\"appear\"\n    @after-appear-class=\"afterAppear\"\n    @appear-cancelled=\"appearCancelled\"\n    appear\n  \u003e\n    \u003c!-- ... --\u003e\n  \u003c/Transition\u003e\n\u003c/template\u003e\n```\n\n## 多元素组件动画\n\n### 多元素动画\n\n- 如果有 2 个原生元素，我们可以使用`v-if/v-else`来实现多元素之间的过渡。\n- 如果有多个元素(2 个以上)，我们可以使用并列的多个`v-if`来实现多个元素的过渡。\n\n**注意：** 如果发送动画的元素标签名相同，注意给需要发生过渡的元素上加上不同的**`key`**值，否则`Vue`只会更新标签的内容。\n\n```vue\n\u003ctemplate\u003e\n  \u003cTransition\n    enter-active-name=\"animate__animated animate__slideInRight\"\n    leave-active-class=\"animate__animated animate__slideOutLeft\"\n  \u003e\n    \u003cbutton\n      v-if=\"status === 0\"\n      :key=\"0\"\n      type=\"button\"\n    \u003e\n      活动未开始\n    \u003c/button\u003e\n    \u003cbutton\n      v-if=\"status === 1\"\n      :key=\"1\"\n      type=\"button\"\n    \u003e\n      活动进行中\n    \u003c/button\u003e\n    \u003cbutton\n      v-if=\"status === 2\"\n      :key=\"2\"\n      type=\"button\"\n    \u003e\n      活动已结束\n    \u003c/button\u003e\n  \u003c/Transition\u003e\n\u003c/template\u003e\n```\n\n有时候，我们只需要给元素绑定`key`值，若`key`值发生变化，也可以触发过渡效果。\n\n```vue\n\u003cscript setup\u003e\nconst status = ref(0)\n\nconst text = computed(() =\u003e {\n  return ['活动未开始', '活动进行中', '活动已完成'][status % 3]\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton\n    @click=\"status++\"\n    type=\"button\"\n  \u003e\n    点击切换\n  \u003c/button\u003e\n\n  \u003cTransition\n    enter-active-class=\"animate__animated animate__slideInRight\"\n    leave-active-class=\"animate__animated animate__slideOutLeft\"\n  \u003e\n    \u003cbutton\n      :key=\"status\"\n      type=\"button\"\n    \u003e\n      {{ text }}\n    \u003c/button\u003e\n  \u003c/Transition\u003e\n\u003c/template\u003e\n```\n\n### 过渡模式\n\n在我们的动画里，尤其是在使用动画库实现多元素过渡时，常会出现动画重叠的现象。而过渡模式正是为了解决这一问题而提供的 API。有两种名过渡模式可以使用：\n\n- **in-out** 新元素先完成过渡，完成之后当前元素过渡离开。(**默认模式**)\n- **out-in** 当前元素先完成过渡离开，离开后新元素再过渡进入。\n\n### 多组件过渡\n\n多组件之间过渡，我们可以使用**动态组件**来进行实现。\n\n\u003e Vue-cli 创建的项目模板，使用的是 _runtime-only_ 的环境，不支持使用`template`的模板自定义组件。\n\n```vue\n\u003cscript setup\u003e\nimport BlueCircle from '@/components/Circle/BlueCircle'\nimport RedCircle from '@/components/Circle/RedCircle'\n\nconst isShow = ref(true)\n\nconst circle = computed(() =\u003e {\n  return isShow ? 'red-circle' : 'blue-circle'\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton\n    @click=\"isShow = !isShow\"\n    type=\"button\"\n  \u003e\n    切换显示\n  \u003c/button\u003e\n\n  \u003cTransition\n    enter-active-class=\"animate__animated animate__bounceInRight\"\n    leave-active-class=\"animate__animated animate__bounceOutLeft\"\n    mode=\"out-in\"\n  \u003e\n    \u003cComponent :is=\"circle\" /\u003e\n  \u003c/Transition\u003e\n\u003c/template\u003e\n```\n\n## 列表过渡\n\n`Transition` 组件经常用于处理单个、或者同一时间几个节点的运动。而对于整个列表的过渡，（比如使用 v-for）产生的，我们就需要使用`TransitionGroup` 来让整个列表实现过渡。\n\n### 基本说明\n\n1. 与 `Transition` 不同的是，`TransitionGroup` 组件会被真实地渲染为**HTML 节点**，默认会被渲染为 `span` 元素，通过指定**tag** 属性可以改变渲染的元素。\n2. 过渡模式在**列表渲染**中是不可用的，因为我们不再相互切换特有的元素。\n3. `TransitionGroup` 组件内部的元素必须有唯一的**key**值。\n\n### 进入离开列表\n\n**！！！注意** 在列表循环的时候，不要把循环的*index*值绑定给**key**，因为`index`不变的元素将不会发生运动。\n\n### 列表排序过渡\n\n普通的列表过渡只有新插入或者移除的元素拥有过渡，周围别的元素的过渡还是瞬间移动到它们布局位置，而不是拥有平滑的过渡。要解决这个问题就需要利用另一个特性**v-move**。\n\n`v-move`特性会在元素改变定位的过程中应用，和之前的类名一样，它也有如下特性：\n\n1. 可以通过 `name` 属性来自定义前缀。（若设置 `name=\"xxx\" `，对应存在类名 `xxx-move` ）\n2. 也可以通过 `move-class` 属性手动设置自定义类名。\n\n\u003e 绑定列表动画的时候可以绑定`data-index`属性到元素上，访问的时候获取索引\n\n```vue\n\u003cscript setup\u003e\nconst array = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\nconst next = ref(10)\n\nfunction random() {\n  return Math.floor(Math.random() * array.value.length)\n}\n\nfunction add() {\n  array.value.splice(random(), 0, next++)\n}\n\nfunction remove() {\n  array.value.splice(random(), 1)\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cLsSection title=\"排序过渡\"\u003e\n    \u003cbutton\n      @click=\"add\"\n      type=\"button\"\n      class=\"mr-4\"\n    \u003e\n      添加\n    \u003c/button\u003e\n    \u003cbutton\n      @click=\"remove\"\n      type=\"button\"\n    \u003e\n      删除\n    \u003c/button\u003e\n    \u003cTransitionGroup\n      name=\"list2\"\n      tag=\"p\"\n    \u003e\n      \u003cspan\n        v-for=\"num in array\"\n        :key=\"num\"\n        class=\"num\"\n      \u003e\n        {{ num }}\n      \u003c/span\u003e\n    \u003c/TransitionGroup\u003e\n  \u003c/LsSection\u003e\n\u003c/template\u003e\n\n\u003cstyle lang=\"scss\"\u003e\n.list2 {\n  // 插入与移除过程\n  \u0026-enter-active,\n  \u0026-leave-active {\n    transition: all 1s;\n  }\n\n  // 开始插入 和 移除结束的位置\n  \u0026-enter-from,\n  \u0026-leave-to {\n    opacity: 0;\n    transform: translateY(50px);\n  }\n}\n\n// 移除过程中位置固定\n.list2-leave-active {\n  position: absolute;\n}\n\n// 元素定位变化动画\n.list2-move {\n  transition: all 1s;\n}\n\u003c/style\u003e\n```\n\n### 时间设置\n\n#### 过渡延迟时间\n\n`animate.css` 内置了延时 1s 至 5s 的类，格式为 `animate__delay-1s `至 `animate__delay-5s`，当然根据自己需要，我们可以自定义别的过渡延迟时间，再将对应的类附加到动画元素上即可。\n\n```css\n.animate__delay-10s {\n  animation-delay: 10s;\n}\n```\n\n#### 过渡持续时间\n\n\u003e `animate.css` 中提供的动画，默认过渡持续时间为 **1s**。\n\n不过，它仍然提供了常用的几个持续时间类供我们使用。\n\n- `animate__slow` 动画过渡持续**2s**\n- `animate__slower` 动画过渡持续**3s**\n- `animate__fast` 动画过渡持续**800ms**\n- `animate__faster` 动画过渡持续**500ms**\n\n当然，如果上述提供的持续时间不能满足你的需求，你仍然可以自定义持续时间类来使用。\n\n## 集成 Animate.css\n\n首先，需要下载 **animate.css** 并引入。\n\n```bash\nyarn add animate.css\n```\n\n然后在 main.js 中引用它。\n\n```js\n// main.js\nimport 'animate.css/animate.css'\n```\n\n### 基本使用\n\n使用 `enter-active-class` 和 `leave-active-class` 即可以指定 `animate.css` 提供的动画类为动画形式。\n\n**注意！！！** 需要在上面的两个类上加 `animate__animated` 类，或者直接加在过渡元素上面。若为多个元素过渡或者列表过渡的时候，则建议把 `animate__animated` 类加在 Vue 的动画状态类上。\n\n```vue\n\u003ctemplate\u003e\n  \u003cbutton\n    @click=\"isShow = !isShow\"\n    type=\"button\"\n  \u003e\n    切换显示\n  \u003c/button\u003e\n\n  \u003cTransition\n    enter-active-class=\"animate__zoomIn\"\n    leave-active-class=\"animate__zoomOut\"\n  \u003e\n    \u003cLsBox\n      v-show=\"isShow\"\n      class=\"animate__animated\"\n    /\u003e\n  \u003c/Transition\u003e\n\n  \u003cbutton\n    @click=\"isShow = !isShow\"\n    type=\"button\"\n  \u003e\n    切换显示\n  \u003c/button\u003e\n\n  \u003cTransition\n    enter-active-class=\"animate__animated animate__zoomIn\"\n    leave-active-class=\"animate__animated animate__zoomOut\"\n  \u003e\n    \u003cLsBox v-show=\"isShow\" /\u003e\n  \u003c/Transition\u003e\n\u003c/template\u003e\n```\n\n## 结合 Vue-router\n\n\u003e 使用了 `vue-router` 的项目在页面跳转间加上过渡效果，可以让页面切换更加平滑，提升用户体验。\n\n### 基本使用\n\n```vue\n\u003ctemplate\u003e\n  \u003cTransition\n    enter-active-class=\"animate__animated animate__fadeInDown\"\n    leave-active-class=\"animate__animated animate__fadeOutUp\"\n    mode=\"out-in\"\n  \u003e\n    \u003cKeepAlive\u003e\n      \u003cRouterView /\u003e\n    \u003c/KeepAlive\u003e\n  \u003c/Transition\u003e\n\u003c/template\u003e\n```\n\n### 路由切换多种动画\n\n```js\n// router.js\nimport { createRouter } from 'vue-router'\n\nconst router = createRouter({\n  mode: 'hash',\n  routes: [\n    {\n      path: '/path1',\n      name: 'page1',\n      component: () =\u003e import('@/views/page1'),\n      meta: {\n        transitionInName: 'fadeIn',\n        transitionOutName: 'fadeOut',\n      },\n    },\n\n    {\n      path: '/path2',\n      name: 'page2',\n      component: () =\u003e import('@/views/page2'),\n      meta: {\n        transitionInName: 'slideInLeft',\n        transitionOutName: 'slideOutRight',\n      },\n    },\n  ],\n})\n```\n\n```vue\n\u003cscript setup\u003e\nimport { ref, watch } from 'vue'\nimport { useRoute } from 'vue-router'\n\nconst route = useRoute()\nconst trsInName = ref('animate__fadeIn')\nconst trsOutName = ref('animate__fadeOut')\n\nwatch(route, () =\u003e {\n  const { transitionInName, transitionOutName } = route.meta\n  transitionInName \u0026\u0026 (trsInName.value = `animate__${transitionInName}`)\n  transitionOutName \u0026\u0026 (trsOutName.value = `animate__${transitionOutName}`)\n})\n\u003c/script\u003e\n```\n\n## 参考资料\n\n[Vue.js - Transition 过渡动画的使用 系列文章](http://m.hangge.com/news/cache/detail_2134.html)\n\n## 工具\n\n**TOC** generated by [gh-md-toc](https://github.com/ekalinin/github-markdown-toc)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fntnyq%2Fvue-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fntnyq%2Fvue-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fntnyq%2Fvue-animation/lists"}