十四、Element-Plus组件库的使⽤

1、动画的基础实现

transition 内置组件实现【单个元素或者单个组件】

1.1、给单个元素添加动画

 

 

 1.2、给单个组件添加动画  跟1.1 一样，用transition包裹就行

 1.3、下列情形可以给任何元素和组件添加进入、离开过度：

• 条件渲染
• 动态组件
• 组件根节点

1.4、面试可能会问动画原理：

1.5、常用的6个类名 ，transition 没有定义name ,默认是v-开头，如果定义了name，就是 name- 开头

 1.6、动画示意图【执行原理】

 

2、animation动画

 

3、同时设置transition 和 animation

需要设置type属性来让vue决定动画根据 transition 还是 animation 来决定动画结束【谁的时间长，写谁】

一般定义的动画和过度时间一样长

或者只用animation 再来定义两个帧的动画，然后就不使用transition 过度了

 

 :duration 显示的指定动画时间  【duration可以定义两种数据类型】

Numer类型：同时设置进入和离开的过渡时间

 Object类型：分别设置进入和离开的过渡时间

 

4、过渡的模式 mode 【用的比较多】

in-out 先进入，后离开，进入结束才执行离开

out-in 先离开，才进入，离开结束才执行进入

 5、初始显示时添加动画效果

 

 

6、结合第三方库实现动画  animate.css【css的动画库】

animate.css对强调，主页，滑动的注意力引导非常有用

6.1 使用animate.css

安装：npm install animate.css

引入：在main.js中import 'animate.css'

使用：将动画名称写入css 或者添加到transition 的 class

 

 

 

7、gsap 第三方库   js 的动画库

css 动画库比较不灵活，固定值比较方便，但是值变化的话，可以使用js库

7.1 使用步骤

安装: npm install gsap

导入:  在用到的组件中 import gsap from 'gsap'

使用对应的api: 配合 transition 提供的 js 勾子 一般使用enter和leave勾子

7.2、了解transition组件给我们提供的js钩子，可以帮助我们监听动画执行到哪个阶段了

 

下面是对照表：

完整写法：

 

 

 8、jsap 实现数字变化效果【常见的动画效果】

 

9、transition-group 【渲染列表】

 

 

 需要用why-move 给需要移动的其他节点设置一个位移的动画，具体位移多少，由vue来决定

10、gasp案例

 

<template>
 
  <div>
    <input type="text" v-model = "msg">
    <transition-group 
      tag = "ul" 
      @before-enter = "beforeEnter"
      @enter = "enter"
      @Leave = "leave"
      :css = "false">
      <li 
        v-for = "(item,index) in showList" 
        :key = "index"
        :data-index = "index"
      >{{item}}</li>
    </transition-group>
    
  </div>
</template>
<script>
  import gsap from "gsap"

  export default {
  
  computed:{
    showList(){
      return this.list.filter(item=>{
        return item.indexOf(this.msg) != -1;
      })
    }
  },
   data(){
    return {
      msg:"",
      list:["abc","wshia","bxixi","hah","dfd"]
    
    }
   },
   methods:{
    beforeEnter(el){
      el.style.opacity = 0;
      el.style.height = 0;
    },
    enter(el,done){
      console.log(el.dataset,el.dataset.index)
      gsap.to(el,{
        opacity:1,
        height:"1.5rem",
        onComplete:done,
        delay:0.05 * el.dataset.index,
        duration:1
      })
    },
    leave(el,done){
      gsap.to(el,{
        opacity:0,
        height:0,
        duration:1,
        onComplete:done,
        delay:0.05 * el.dataset.index,//小技巧：el.dataset可以获取到上面元素里绑定的属性
      })
    }
   }
    
    
  }
</script>

<style scoped>

</style>