P4:vue下内置组件transition-group

介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<transition-group name="slide" tag="ul">
    <li v-for="item in searches" :key="item.id" class="item-class" @click="selectItem(item)" >
      <span class="text">{{item}}</span>
          <i class="icon icon-delete"></i>
      </span>
    </li>
</transition-group>
//styles
.slide-enter-active, .slide-leave-active{
    transition: all 0.1s
}
.slide-enter, .slide-leave-to{
    height: 0
}

过渡类：

【VUE】, 常用技巧