JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <transition-group tag="ol" name="todo">
    <li
      v-for="(todo, i) in todos"
      :key="todo.id"
      @click="todos.splice(i, 1)"
    >{{ todo.text }}</li>
  </transition-group>
</div>

CSS

li {
  padding: 10px;
  transition: all 0.7s;
}

.todo-leave-active {
  position: absolute;
}
.todo-leave-to {
  transform: translateX(500px);
  opacity: 0;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Play around in JSFiddle' },
      { text: 'Build something awesome' },
    ].map((n, i) => ({ ...n, id: i + 1 })),
  },
});