今天在用vue的内置组件transition时出现了一丢丢的小BUG，出现动画类没有加上的问题。不过我看了控制台的DOM结构后就发现，加了appear时其实一开始是有动画类加到DOM上的。但为什么后来没有呢？先不着急，我们先来看一下。

这个结构应该可以看的很明白。就是一个按钮和一个transition组件。 我们都知道transition动画类的加上移除是通过监听根节点DOM的出现和消失实现的。

那么清楚这一点就可以很明显地找到问题的解答方向 一开始DOM不存在而是直接创建，又因为有appear所以动画类很自然就加上了。 但是后面点击按钮又没有了？很有可能就是我们的根节点没有发生变化 这里就要涉及到一丢丢vue的diff算法和对真实DOM是如何复用的知识了。 这里也不详细展开了，有需要我会在写一篇文章的，最近也是在搞自己的个人博客就快搞完了，请期待咯 言归正传，直接说明原因了

因为两个div都是div又没有key，所以diff算法过程中会认为这两个节点是一样的，尽管子节点不一致，但这个根节点的真实DOM被复用，而transition是监听根节点的出现和消失的，很明显是没有根节点的出现和消失的，transition自然也监听不到。

着急的朋友可以直接看这里，我只是想说明原因，才那么啰嗦，别怪我哦

解决办法给transition中的根节点添加唯一标识的key至于为什么，上面有说明理由哦，喜欢深究原因的朋友，请看上面的解释 解决的办法尽管简单，但是方向还是要找对，原理很重要。 好了，我的个人博客快准备好了，以后会上链接的，一些BUG的问题会在csdn上发布，其它一些比较细节的，可能就是在个人博客了。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。