vue-动画基础-velocity

1.前言

之前在公司上班 ,或者接私活 整体上动画其实几乎某用到
最近看文档 又梳理了下,那就记下来吧

---

2. transition

vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：
1 .在 CSS 过渡和动画中自动应用 class

2. 可以配合使用第三方 CSS 动画库，如 Animate.css 案例
3. 在过渡钩子函数中使用 JavaScript 直接操作 DOM
4. 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

3.Vue 提供了 transition 的封装组件

动画的 钩子 生命周期可以看文档解释非常清除 ,这里简单说几个点
v-enter-active 简单理解为 标签出现的动画
v-leave-active 标签离开的动画
上面2个里面 一般定义 动画的时长 延迟和 曲线函数 就是那个贝塞尔曲线
例如 {animation: moveOne 1s;}
{transition: all 2s;}
v-enter-to 进入过渡的结束状态 比如出现后位置在哪颜色等
v-leave-to 离开过渡的结束状态 比如最后消失的位置 在哪

注意

v 就是 transition 的name属性对应的值
比如下面的案例 name 是 yzs 那么写 样式动画的时候 就用yzs代替 v

---

3.js动画

这里没有使用定时器 而是用了 requestAnimationFrame 这个api
js动画主要就是给vue自带的钩子 绑定上自己的 动画函数就行

---

---

4.Velocity

4.1简介

Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery完美协作，并和$.animate()有相同的API， 但它不依赖jQuery，可单独使用。Velocity不仅包含了$.animate()的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。

它比 $.animate()更快更流畅，性能甚至高于CSS3 animation， 是 jQuery和 CSS3 transition的最佳组合，它支持所有现代浏览器，最低可兼容到IE8和Android 2.3。

---

4.2 引入方式 1

直接脚本引入

---

4.3 脚手架项目

npm安装 注意 安装这个velocity-animate

npm install velocity-animate -S

哪个组件使用哪个组件可以引入 ,
也可以作为全局引入

import Velocity from "velocity-animate";

---

4.4 使用方式都一样

钩子

 methods: {
   beforeEnter (el) {
      el.style.opacity = 0
    },
    enter (el, done) {
      Velocity(el, { opacity: 1}, { duration: 3000,complete:done })
    },
    leave (el, done) {
      Velocity(el, { opacity: 0}, { duration: 3000,complete:done })
    }
}

比原生JS简单方便多了,可以多用用哦

---

5.列表动画

列表动画我觉得官网写的也挺好的 建议看看
注意key值的写法 不要 用索引.因为索引永远不会变,不管你是插入,还是删除,第一个位置永远是0,第二个永远是1,监听不到key的变化,自然也就无法做动画,其实就是底层 diff虚拟 DOM触发不了

---

参考资料

vue-动画
Velocity

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉