动画组

• 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
• 过渡模式不可用，因为我们不再相互切换特有的元素。
• 内部元素 总是需要 提供唯一的 key 属性值。

  
<transition-group name="slide" tag="ul">        
  <li class="item p15" v-for="(item,index) in listing" :key="item"> 
</transition-group>

  
/* 定义进 的关键帧动画*/
@keyframes slideIn{
  from{ opacity: 0; transform: translateY(-80px);}
  to{opacity: 1; transform: translateY(0px);}
}
/* 定义出 的关键帧动画*/
@keyframes slideOut{
  from{ opacity: 1; transform: translateX(0);}
  to{opacity: 0; transform: translateX(-100%);}
}


/*enter-active 进入时候添加class名称*/
.slide-enter-active{
  animation: slideIn .5s ease;
}
/*离开的时候添加的class 名称*/
.slide-leave-active{
  animation: slideOut .3s ease;
  position: absolute;
}
/*正在移动元素 添加的class名称（vue 内置添加的）*/
.slide-move{
  transition: all .3s ease;
}