Vue动画篇（四）——列表动画，vue前端开发

<button @click=“add”>添加

• {{item.id}}-------{{item.name}}

  注意事项

  （1）在实现列表过渡的时候，需要过度的元素，是通过v-for循环渲染出来的，不能使用 transition 包裹，需要使用transitionGroup

  （2）如果要为v-for循环出来的元素设置动画，必须为每一个元素设置 :key 属性

  （3）最后要定义这两组类

  .v-enter,

  .v-leave-to {

  opacity: 0;

  transform: translateY(100px);

  }

  .v-enter-active,

  .v-leave-to {

  transition: all 0.6s ease;

  }

  列表删除功能动画实例

  ---

  承接上个例子，增加了列表删除功能

  <button @click=“add”>添加

  {{item.id}}-------{{item.name}}