// 动画 显示|隐藏 进入|离开
// 6种状态 1 进入前 2 进入中 3 进入后 4 5 6 离开
// v-enter-from v-enter-active v-enter-to
// 一般使用 动画时 进入 离开 需要翻转一下 reverse
// 准备好动画
// @keyframes demo{ }
// 谁做动画 给谁包 transition 显示隐藏 切换类名
// 坑 注意 transition 包裹的层级
// appear 加载时就播放动画,首次进入 或者刷新
// <transition appear name="test">
// <h1 v-show>
// <transition/>
//v-enter-active v对应name="test" 多个不同动画同时进行
//test-leave-active{ animation: demo 0.5s linear reverse}
// 过渡
// transition 包裹后 一共加了 三个 类名
// 进入的起点 离开的终点
// .v-enter-from , .v-leave-to{transform:translateX(-100%)}
// 进入的终点 离开的起点
// .v-enter-to , .v-leave-from{transform:translateX(0)}
// v-enter-from ---> v-enter-to || v-leave-from ---> v-leave-to
// 对 动画元素添加 过度 h1{transition:0.5s linear}
// 或者 v-enter-active,v-leave-active{transition:0.5s linear}
// 可以同时 在active 中 执行 transition 与 keyframes
// 但是二者时间可能不一致 一般以时间长的为准 ,需要 在 <transition 中 添加 type='transition '
// 添加谁 就以谁为准 一般以时间长的为准
// <transition 也可以指定 时间 这样 css 中的 时间设置无效 一般以css 中
// :duration='1000'
// :duration='{enter:800,leave:600}'
// 多个元素做动画 必须要 加 key
// <transition-group name='wn' tag='div' 默认不包裹 tag设置 谁来包裹
// <h1 key="1"
h1s 对应的 出现 和 隐藏 就会做出对应的动画
但是 h1中 的新增 和 删除 会对 其他 h1造成 位移 此位移没有动画
这个问题vue封装好了 只要css 添加以下 位移过渡 即可
.wn-move{
transition:transform 1s ease;
}
自动完成 其他元素的位移动画
移除时有过程时间,后面的移不动 所以可以 在
.wn-leave-active{
position:absolute;
}
移除时 脱标即可
// 利用第三方 库 完成动画 效果
// Animate.css npm
// npm i animate.css
// main 中导入
import 'animate.css'
// 依靠下面 三个 属性 实现动画 参考官网
// <transition name='wn'
// css中
// 网站右侧 直接复制
// .wn-enter-active{
animatioan:rubberBand;
}
// .wn-leave-active{
animatioan:rubberBand reverse;
}
// 方式 二
// 网站右侧 点击复制 name = "animate_animated animate_bounce" animate_animated必须有
// 将 name 去掉 + -class 这个优先级 自定义 class 更高
<transition enter-active-class='animate_animated animate__rubberBand'
// gsap js库
<transition
@before-enter=
@enter='enter'
@after-enter=
@leave='leave'
:css='false' 因为要靠js来实现动画 无需在检测css是否有动画了 提高性能
会执行 动画相关的 钩子
1 安装
npm i gsap
2 导入
使用的组件中
import gsap from 'gsap'
transition 包裹 el 组件实例 动画完成
enter 对应 from
const enter = (el,done) =>{
gsap.from(el,{
scale:0, 参考官网 可以是响应数据 灵活
x:200,
onComplete:done
})
}
leave 对应 to
const leave = (el,done) =>{
gsap.to(el,{
scale:1,
x:0,
onComplete:done
})
}
数字快速变化
gsap 传入的组件实例 也可以是 this data会在1秒内自增 可以去掉小数点 data.toFixed(0) 做效果展示
watch(data,(newData)=>{
gsap.to(this,{
duration:1,
data:newData,
onComplete:done
})
})
/*
动画 ==========================
产生的条件 是组件的 移除 和 创建 内容变化不会触发动画
组件--DOM 添加 key="id" 就会因为内容的不同重新创建组件触发动画
动画执行顺序 -- 不然会 新老 有叠加显示
当前元素--out
mode="in-out" 新元素先进入 当前元素离开
mode="out-in" 当前元素先离开 当前元素先离开
*/
/*
XtxMessage
动画用在 v-if 等 移除条件 比如骨架屏
但是有些组件 是自己独立存在的 可以 设置一个 变量来控制 自身的 创建与移除
一开始 为 false 组件挂载完毕 为 true
const visible = ref(false)
onMounted(() => {
visible.value = true
})
总结
1 v-if 加 transition 包裹 可以实现 来去 两种动画
from to 相当于 动画开始结束状态 放 opacity transform
active 相当于 执行 时机 放 transition @keyframes
2 hover 类名 实现 来去 两种动画 因为 hover 该组件一直存在
opacity transform --> transition
3 v-if 或者 onMounted 添加类名
该状况 组件 离开 不会显示离开动画 方式 同 2
类名的变化 需要延时触发才会生效 setTimeout(() =>{}) 显示时
4 添加类名 但是 不用 v-if 而是模仿 hover样式 将v-if控制 组件显示或者消失
改为 添加 类名 设置 opacity 0 height 0 translate 等 改变 是否显示
*/
过渡与动画 Animate GSAP
于 2022-11-07 16:50:55 首次发布