vue 过渡效果

Vue中提供了`<transition>`和`<transition-group>`来为元素增加过渡动画。文档写的很清楚，但是实际使用起来还是费了一番功夫。这里做一个简单的记录:
单个过渡使用`<transition>`元素把要过渡的部分包裹起来，`<transition>`不会在DOM中渲染出来，只是做一个标记。其中常用的属性主要是：

- name : 匹配相应的过渡类名，当没有name的时候默认为v-enter,v-leave-active等
- mode:控制离开/进入的先后顺序，out-in或者in-out

多个元素过渡的时候使用`<transition-group>`元素把要过渡的部分包裹起来，`<transition-group>`会在DOM中渲染一个新的元素，把要过渡的这多个部分包裹起来，渲染的元素默认是span，可以使用tag属性来设置。常用的属性是：

- tag: 默认为span，实际使用的时候，可以设置为要过渡的部分的父元素的类型。
- name：过渡类名，同上
注意，<transition-group>的每个子节点必须有独立的key，动画才能正常工作。并且这里的key需要是item的一部分才可以，如item.id。我偷懒想用循环的index，会bug。该bug具体表现为：当你删除多个节点中的任意一个时，动画永远发生在最后一个节点身上。

例如：

//html
<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>
//css
.slide-enter{opacity:0;transform: translate(-50px,0px);}
.slide-leave-active {opacity:0;transform:translate(0px,-50px);}

关于过渡动画的调试技巧

这里是很重要的一个地方，动画的调试不像js调试，能够设置断点，逐步跟踪，动画不执行时，经常并不会报错，我在实际使用的过程中，一开始也花了大量的时间在调试上，后来找到了技巧，就简单多了。
动画调试步骤;
1.首先确认是否有给要过渡的DOM元素加上`transition: all .2s ease;`属性，在不使用animation时，必须有这个过渡属性，才能平滑改变DOM的css属性，如果忘记加了，也不会报错，但就是一直没效果。
2.然后在浏览器F12中，选择要执行动画的DOM元素，然后在F12中添加动画结束状态时该DOM的css属性。这一步的原因在于，很多时候我们以为动画没有执行，其实是执行了，只是看不出来而已。比如子div撑大了父div的高度，此时动画改变父div的高度，也并没有用。所以我们一开始先确认一下，保证动画结束时的状态准确无误。如果无误，这时候在控制台改变属性，就已经能看到动画正确执行时，应该有的渐变效果了。
3.最后，如果动画还没有正确执行，就要检查相应的name，tag,key等属性是否有正确添加，过渡类名的选择是否有误。在插入元素时，是先插入，再动画的，所以使用v-enter;而在删除元素时，是先动画，再删除的，所以使用v-leave-active。具体使用什么根据需求来定。

动画的小技巧

在删除DOM节点的时候，我遇到了这样一个问题，动画结束之后，删除之前，这个DOM元素依然在父元素中，父元素的高度依然被他撑大。删除之后的一瞬间，父元素的高度不被他撑大了，所以立即改变，在这里就产生了一些不平滑的动作，看起来很突兀。想了很久最后用一个感觉不那么优雅的办法解决了，如果有人看到这里，有更好的方法，请务必留言告诉我，谢谢。
我的方法是，在动画结束的时候，将该子元素设置为position:absolute，这样他就不会撑大父元素的高度了，但是这又产生了一个新的问题：删除时该元素会在绝对定位之后的地方闪烁一下才消失，为了避免闪烁，在绝对定位之后，再给他一个top:-99999px;把绝对定位的元素移动到屏幕外，避免用户看到闪烁。虽然这个方法总觉得不太合适，但是能解决问题，在有更好的方式之前，也只能先这样了。

版权声明：本文为博主原创文章，未经博主允许不得转载。原账号CreabineChen现已不用，所有博客均已迁移过来。