关于vue内置transition组件的动画类添加失效

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

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

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

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

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

• 解决办法
• 给transition中的根节点添加唯一标识的key
• 至于为什么，上面有说明理由哦，喜欢深究原因的朋友，请看上面的解释
  
  解决的办法尽管简单，但是方向还是要找对，原理很重要。