194 Animating Lists with transition-group

使用transition-group可以包裹li这样的多节点标签，用法和transition几乎一样

示例

<transition-group tag="ul" name="user-list">
    <li v-for="user in users" :key="user" @click="removeUser(user)">{{ user }}</li>
</transition-group>


.user-list-enter-from {
    opacity: 0;
    transform: translateX(-200px);
}

.user-list-enter-active {
    transition: all 1s ease-out;
}

.user-list-enter-to {
    opacity: 1;
    transform: translateX(0);
}

.user-list-leave-from {
    opacity: 1;
    transform: translateX(0);
}

.user-list-leave-active {
    transition: all 1s ease-in;
}

.user-list-leave-to {
    opacity: 0;
    transform: translateX(200px);
}