Vue学习笔记---transition

• 概念：淡入淡出过程，相对于transition，任何组件和元素添加进入/离开过渡
• name属性：对应过渡的名称
• 过渡类名：v对应transition的name
  • v-enter：进入过渡的开始状态，元素插入前生效，插入后下一帧移除
  • v-enter-active：进入过渡生效时的状态，定义过渡的过程时间，延迟和曲线函数
  • v-enter-to：进入过渡的结束状态，云阿苏插入之后下一帧生效，过渡完成后移除
  • v-leave：离开过渡的开始状态
  • v-leave-active：离开过渡生效时的状态
  • v-leave-to：离开过渡的阶数状态
• CSS过渡/CSS动画
• 自定义过渡的类名（transition内属性定义，结合css动画库）
  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)
• duration属性：显性的过渡持续时间
• JavaScript钩子：
  • v-on绑定属性before-enter、enter、after-enter、enter-cancelled
  • vue实例中methods定义方法：enter:function(el,done){done()}
  • 仅用JavaScript过渡时，enter与leave必须使用done回调，否则同步调用，过渡立刻完成
  • 仅用JavaScript过渡时，v-bind:css=“false”，跳过CSS检测，避免CSS影响
• appear属性：设置节点在初始渲染的过渡
• key属性：多个相同标签名的元素切换，需要使用key属性来设置唯一标识让vue进行区分
• mode属性：过渡默认行为是进入和离开同时发生，可定义过渡模式
  • in-out：新元素先进行过渡，完成之后当前元素过渡离开
  • out-in：当前元素先进行过渡，完成之后新元素过渡进入
• 列表过渡：
  • < transition-group > 组件定义一个列表，默认为一个< span >，可通过tag属性替换为其他元素
  • 不仅可以进入和离开动画还可以改变定位
  • 过渡模式不可用
  • 总是需要key属性
  • CSS过渡类应用于内部元素而不是容器本身
  • 过渡类名v-move定义元素改变定位时的切换时间和过渡曲线，元素不可为display: inline