Блог

Я пытаюсь анимировать добавление и удаление элементов в массиве, все работает нормально. Единственное, что я пытаюсь выяснить, это то, что когда я удаляю элемент из списка, все остальные элементы всплывают, я хочу анимировать их, сдвигая список вверх, когда какой-либо элемент удаляется, как я могу этого добиться?

моя песочница здесь: Ссылка на песочницу

Vue code: `

 <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);
  }
}