vue3 transition-group实现数据插入动画

vue3 transition-group实现数据插入动画

<template>
  <!-- 实时报警列表 -->
  <div class="alarm-page">
    <!-- <button class="add" @click="addItem(1)">添加数据</button> -->
    <div class="list" v-if="list.length">
      <transition-group :name="animationName">
        <div class="list-box" v-for="(item, index) of list" :key="item.id">
          <div class="list-item">
            <div class="num">{{ index + 1 }}</div>
          </div>
        </div>
      </transition-group>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { onMounted, ref } from "vue";

const list = ref(<any>[])
const listAll = ref(<any>[])
const animationName = ref('')

let timer = <any>null;
const mockAdd = () => {
  let index = 0;
  timer = setInterval(() => {
    animationName.value = 'slide';
    const newItem = listAll.value[index];
    setTimeout(() => {
      list.value.unshift(newItem);
    }, 1000)
    index++;
  }, 5000)
}
onMounted(() => {
  let data = [
    {id:1},
    {id:2},
    {id:3},
    {id:4},
    {id:5},
    {id:6},
  ]
  listAll.value = data;
  mockAdd()
})
</script>
  
<style lang="scss" scoped>  
.alarm-page {
  height: calc(100% - 5rem);
  position: relative;
  width: 100%;
}
.slide-enter-active {
  animation: slide-in 0.5s ease-out;
}

.slide-leave-active {
  animation: slide-out 0.5s ease-out;
  /* 这里在离开的时候，需要让这个元素脱离标准流，不然后面的元素动不了 */
  position: absolute;
}
  
/* 想要让动画平滑一点，需要加v-move的类名，v-可以别name的值 */
.slide-move {
  transition: all 1s;
}

@keyframes slide-in {
  from {
    transform: translateY(10px)
  }

  to {
    transform: translateY(0)
  }
}
  
@keyframes slide-out {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(10px)
  }
}
  
.list {
  height: calc(100% - 4rem);
  overflow-y: scroll;
}

.list-box {
  @include fetch('background', "bg-bjlb-content");
  @include fetch('color', "color-bjlb-content");
  height: 4.1rem;
  font-family: PH;
  font-weight: 400;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #4C5D78;
  cursor: pointer;
  margin-bottom: 0.4rem
}
  
.list-item {
  .num {
    width: 18px;
    height: 20px;
    background: #465A78;
    font-family: din;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
  }
}
</style>

一个小盒子，（hover）鼠标移入缓缓上升，鼠标移出缓缓下降

.video-bg {
    width: 100%;
    height: 2rem;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 0;
    bottom: 0;
    padding-left: 1rem;
    line-height: 2rem;
    font-weight: 400;
    font-size: 12px;
    color: #CFCFCF;
    font-family: PH;
    opacity: 0;
  }

  .view-item:hover {
    .video-bg {
      animation: video-bg-show 0.4s ease-out;
      animation-fill-mode: forwards;
    }
  }

  // .view-item:nth-child(1) {
  //     margin-right: 0.9rem;
  // }
}

@keyframes video-bg-show {
  from {
    opacity: 0;
    transform: translateY(2rem)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}