javascript - 在删除数组项之前添加 css 动画

Question

我想在从我的数据表中删除一个项目之前做一个 css 动画。元素的删除由事件 @click 触发。所以我想先看看我的动画做了什么(class delete_animation)并且只有在删除元素之后。

var vm = new Vue({
  el: '#app',
  data: {
  	addedId: null,
		array: [
    	{ id: 1, text: "lorem ipsum" },
      { id: 2, text: "lorem ipsum" },
    ]
  },
  methods: {
  	add() {
    	this.addedId = this.array[this.array.length - 1].id + 1;
      this.array.push({ id: this.addedId, text: "lorem ipsum"} );
    },
    remove(item, index) {
      this.array.splice(index, 1);
      this.addedId = null;
      // ???
    }
  }
});

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

.add_animation {
  animation: addItem 1s;
}

@keyframes addItem {
  0% {
    background-color: green;
  }
  100% {
    background-color: white;
  }
}
.deleted_animation {
  animation: deleteItem 1s;
}
@keyframes deleteItem {
  0% {
    background-color: red;
  }
  100% {
    background-color: white;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<div id="app">
  <table>
    <tr v-for="(index, item) in array" :key="item.id" :class="addedId == item.id ? 'add_animation' : ''">
      <td>{{ item.text }}</td>
      <td> <button type="button" @click="remove(item, index)">remove</button></td>
    </tr>
  </table>
  <button type="button" @click="add()">Add</button>
</div>

我只想做与“添加”按钮相反的事情。但是，我看不到如何处理等待动画显示的事件。我想我需要在我的动画显示后触发点击，但我不知道如何...

谢谢!

Answer 1

我不确定，但据我了解，您想使用 vue.js 为删除数组中的项目设置动画。

使用 vue.js 一切都很简单，所以请参阅 Vue.js Transitions

我为你做了一个简单的例子，当你删除它们时动画项目。它可能对你有帮助。

See it in action here

“html”部分

<div id="app">
  <transition-group name="fade">
      <div v-for="(todo,index) in todos" :key="todo.text" @click="deleteItem(index)">
        {{ todo.text}}
      </div>
  </transition-group>
</div>

javascript部分

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
        deleteItem(index) {
        this.todos.splice(index, 1);
    }
  }
})

css部分

.fade-leave-active {
  transition: all 1s;
}

.fade-leave-to {
  opacity: 0;
}