Vue.js-如何在删除任何项目时为列表添加动画

问题描述

我正在尝试对数组中项目的添加和删除进行动画处理，一切工作正常。我要弄清楚的唯一一件事是，当我从列表中删除一个项目时，剩余的所有项目都会跳起来，当要删除任何项目时，我想通过向上滑动列表来使其成为动画，我该如何实现？

代码：`

<template>
  <div>
    <b-button @click="add" class="m-1" size="sm">Add</b-button>
    <b-button @click="remove" size="sm">Remove</b-button>
    <transition-group name="slide">
      <b-alert v-for="i in item" variant="success" :key="i" show>{{i}}</b-alert>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,item: []
    };
  },methods: {
    remove() {
      this.item.splice(0,1);
    },add() {
      this.item.push(Math.floor(Math.random() * 10 + 1));
    }
  }
};
</script>

我的CSS：

<style>
.slide-enter {
  opacity: 0;
}

.slide-enter-active {
  animation: slide-in 0.5s ease-out forwards;
  transition: opacity 0.5s;
}

.slide-leave-active {
  animation: slide-out 0.5s ease-out forwards;
  transition: opacity 0.5s;
  opacity: 0;
}
@keyframes slide-in {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(0px);
  }
}
@keyframes slide-out {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(350px);
  }
}
</style>

解决方法

从Bootstrap-vue社区获得了一些帮助，特别感谢@hiws。经过一些CSS更改，我们能够实现功能。

.slide-enter {


opacity: 0;
}

.slide-move {
  transition: transform 1s;
}

.slide-enter-active {
  animation: slide-in 0.5s ease-out forwards;
  transition: opacity 0.5s;
}

.slide-leave-active {
  position: absolute;
  width: 100%;
  animation: slide-out 0.5s ease-out forwards;
  transition: opacity 0.5s;
  opacity: 0;
}

@keyframes slide-in {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(0px);
  }
}

@keyframes slide-out {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(350px);
  }
}

bootstrap-vue vue.js