过渡与动画 Animate GSAP

网址

// 动画  显示|隐藏   进入|离开
// 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 等  改变 是否显示
*/