tansition、animate动画，虚拟DOM及Diff算法

SPA应用

Single Page Application 单页面应用 切换组件来实现交互 跟App一样的使用体验

transition

vue实现动画交互的内置组件

1. 自定义动画 动画流程图

• 入场
• 出场

2. 结合animate.css动画库使用 文档

<transition 
    enter-active-class="animate__animated animate__fadeInLeft" 
    leave-active-class="animate__animated animate__fadeOutRight" 
>
    <div class="box" v-if="isShow"></div>
</transition>

3. transition组件的其他功能 参考文档

• props参数

  • name
  • enter-active-class 入场动画名称
  • leave-active-class 出场动画名称
  • appear
  • mode 多个元素的时候，控制进出场顺序

• 事件

虚拟 DOM 与 Diff算法

JS对于数据包的操作效率，高于对于DOM的操作效率

1. 虚拟DOM

本质是一个JSON对象

• 真实DOM

<div>
  <span></span>
  <span></span>
</div>

• 虚拟DOM

{
  tag:'div',
  attr:'',
  children:[
    {
      tag:'span'
    },
    {
      tag:'span'
    }
  ]
}

2. vue更新视图的具体过程

旧的真实DOM---旧的虚拟DOM---Diff算法---新的虚拟DOM----新的真实DOM

3. 通过自己的语言描述 虚拟DOM与Diff算法

自己总结一篇文章

transition-group

文档

1. 基本使用

2. 元素依次进入动画效果，拓展案例

Swiper的使用

文档

1. swiper单独使用流程

2. swiper跟vue结合使用是，注意new Swiper的时机

Swiper必须控制到所有内部DOM节点，才能正常滑动

3. $nextTick

等到本次数据更新引发的真实DOM渲染完毕后，才会执行内部函数 文档