如何使过渡组元素在超时后消失？

Question

我有一个过渡组，在某些事件上添加了元素，但我希望它们在10秒后消失。我该如何实现？

    <transition-group name="list">
        <span v-for="event in events" :key="getKey(event)" class="list-item">
             <div>{{ event }}</div>
       </span>
    </transition-group>


   <style lang="scss">
       .list-enter-active, .list-leave-active {
           transition: all 1s;
       }
       .list-enter, .list-leave-to {
           transform: translateX(30px);
       }
    </style>