备忘录
添加
  
 {{item}}
  

        下面再添加一个"删除"按钮，当我点击 "删除" 按钮时候点击的时候那么对应的内容也就会被移除掉，也即使 .content-leave-active 的效果：

        思路：通过索引的方式来删除对应的备忘记录；

 {{item}}| 删除
...
methods:{delCont(index){this.contList.pop(index);}
}

效果： 

         如果是按顺序来删除的话，并没有发现有什么问题，但如果删除中间的中午，会发什么以下的这种情况：

         它的动画效果是最后一个，不应该是中午被移除的动画效果吗？这又是为什么呢？同样的在讲到key值的时候就讲到过这个缘由；下面通过一张图的方式来解读：

        那么对于key的设置的内容可以看一下往期的这篇内容，（ 附上地址：key值设置 ）

那么于此同时也可以看一下控制台会有这样的提示信息，提示不建议使用这个index做它的key；

[Vue tip]: Do not use v-for index as key on  children, this is the same as not using keys.(found in )

 设置key值最好就是能够保证它的一个唯一性，提供唯一的key属性值，编写测试一下删除动画：

 {{item}}| 删除

测试效果： 

        这下我们的效果内容就正常了，能够正常的实现删除的动画效果，它是通过key进行对比，然后删除对应key值的内容；下面来看一下它对应的DOM结构：

 transition-group 默认

        不同于 transition 是 transition 会以一个真实元素呈现：默认为一个span标签 : ；可以通过tag特性来更换其他元素；

        下面可以利用tag，将 变换成

，那么原先的ul就可以去掉了；

 {{item}}| 删除

        以上就是本篇目的内容了，通过学习transition和transition-group，了解两者之前的一些区别以及对应能够实现的效果；本篇内容可以结合这几篇内容：

---

附上链接：

第二十九篇 动态组件 - component

第三十二篇 transition 过渡动画

---