如何使用Vue.js动画待办事项从一个列表移动到另一个列表？

Question

我正在尝试[V0]来使用Vue.js制作动画。

下面您可以找到我到目前为止所做的。只需单击待办事项即可查看。

this svelte example

new Vue({
  el: "#app",
  data: {
    items: [
    	{ id: 1, name: 'John', done: false },
      { id: 2, name: 'Jane', done: false },
      { id: 3, name: 'Jade', done: true },
      { id: 4, name: 'George', done: true },
    ]
  },
  
  computed: {
  	done () {
    	return this.items.filter(i => i.done)
    },
    
    undone () {
    	return this.items.filter(i => !i.done)
    }
  },
  
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  height: 500px;
  transition: all 0.2s;
}

.todos {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.todo {
  border: 1px solid #ccc;
}

.todo.undone {
  grid-column: 2 /span 1;
}

.todo.done {
  grid-column: 1 /span 1;
  background: blue;
  color: white;
}

.flip-list-move {
  transition: all 1s ease-in-out;
}

.header-wrapper {
  display: grid;
  grid-auto-flow: column;
  
}

.header, .todo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 5px;
}

为了使待办事项从一个列表移动到另一个列表，我使用了CSS网格，但是在没有空的网格单元的情况下，我找不到找到待办事项（左右）的方法。

如果有更好的方法在svelte docs中实现示例或省略空白单元格的方法，我将不胜感激。

尽管一开始看起来很容易，但还是有些棘手。

我正在尝试使用这个精巧的示例来使用Vue.js制作动画。您可以在下面找到我到目前为止所做的事情。只需单击待办事项即可查看。新的Vue（{el：“ #app”，数据：{个项目：...

Answer 1

尝试：