Transition

1|0内置组件Transition

官网详细文档：https://cn.vuejs.org/v2/guide/transitions.html

1|1时机

Transition组件会监控slot中唯一根元素的出现和消失，并会在其出现和消失时应用过渡效果

具体的监听内容是：

• 它会对新旧两个虚拟节点进行对比，如果旧节点被销毁，则应用消失效果，如果新节点是新增的，则应用进入效果
• 如果不是上述情况，则它会对比新旧节点，观察其v-show是否变化，true->false应用消失效果，false->true应用进入效果

1|2流程

类名规则：

1. 如果transition上没有定义name，则类名为v-xxxx
2. 如果transition上定义了name，则类名为${name}-xxxx
3. 如果指定了类名，直接使用指定的类名

指定类名见：自定义过渡类名

1. 进入效果

2. 消失效果

1|3过渡组

Transision可以监控其内部的单个dom元素的出现和消失，并为其附加样式

如果要监控一个dom列表，就需要使用TransitionGroup组件

它会对列表的新增元素应用进入效果，删除元素应用消失效果，对被移动的元素应用v-move样式

被移动的元素之所以能够实现过渡效果，是因为TransisionGroup内部使用了Flip过渡方案

__EOF__

本文作者：shmillly959
本文链接：https://www.cnblogs.com/shmillly959/p/18164622.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！