vue列表逐个进入过渡动画

vue实现列表依次逐渐进入动画

利用vue 中transition-group 实现列表逐个进入动画效果

1.vue3代码，

　

<template>
  <section class="search-tool">
    <div class="search-content">
      <div class="build-box">
        <div class="list">
          <transition-group name="more" :css="false" @before-enter="beforeEnter" @enter="enter">
            <!-- template 是为了解决vue3 vfor vif一起使用时冲突  -->
            <template v-for="(build, b_index) in data.buildList" :key="b_index">
              <!-- data-key 自定义属性，为过渡效果添加延时  -->
              <!-- 类似 ant motion 中列表渲染时添加的key-->
              <div v-if="data.show" :data-key="b_index">
                <div
                  v-if="build.name.indexOf(data.inputVal) >= 0"
                  class="build-item"
                  :title="build.name"
                >
                  <div class="overflow-1">建筑{{ b_index }}</div>
                  <div class="collect" @click="collectBuild()"></div>
                </div>
              </div>
            </template>
          </transition-group>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed } from 'vue'
import "./../assets/transiton.css"
const data = reactive({
  show: false,
  inputVal: '',
  buildList: [
    {
      name: '11'
    },
    {
      name: ''
    },
    {
      name: ''
    },
    {
      name: ''
    },
    {
      name: ''
    },
    {
      name: ''
    }
  ]
})
const collectBuild = () => {}
const beforeEnter = (el) => {
  el.style.opacity = 0
}
const enter = (el, done) => {
  let delay = el.dataset.key * 150 //进入延时
  setTimeout(() => {
    el.style.transition = 'opacity 0.4s '
    el.style.opacity = 1
    el.style.animation = 'right-to-left 0.4s infinite' //动画效果
    el.style['animation-iteration-count'] = 1
    done()
  }, delay)
}
onBeforeMount(() => {})
onMounted(() => {
  data.show = !data.show
})
watchEffect(() => {})
defineExpose({
  ...toRefs(data)
})
</script>
<style scoped lang="scss">
.search-tool {
  width: 500px;
  height: 800px;
  background: rgba($color: #000000, $alpha: 0.7);
  .search-content {
    max-height: 1170px;
    color: #fff;
    font-size: 30px;
    .list {
      max-height: 380px;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .build-item {
      height: 72px;
      background: #000000;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: pointer;
      margin-bottom: 5px;
      padding-left: 15px;
      box-sizing: border-box;
      position: relative;
      display: flex;
      align-content: center;
      align-items: center;
      .overflow-1 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        max-width: 450px;
      }
    }
    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 12px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 20px;
    }
    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px #2c8af3;
      background-color: #2c8af3;
    }
    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px #a1a1a1;
      border-radius: 0;
      display: none;
    }
  }
}
</style>

　

2.过渡动画放在 统一放在一个transiton.css文件夹中，引入到main.js或者单个组件引入

body{
  padding: 0;
  margin: 0;
}
/* 从右到左 */
@keyframes right-to-left {
  from {
    padding-left: 100%;
  }
  to {
    padding-left: 0%;
  }
}
/* 从左到右 */
@keyframes left-to-right {
  from {
      padding-right: 100%;
  }
  to {
      padding-right: 0%;
  }
}

更新：解决循环元素过多，防止延时时间过长，dom长期不显示

let index = 0
const enter = (el, done) => {
  let delay = el.dataset.key * 150 //进入延时
  if(index <= 30){//只循环30条
        setTimeout(() => {
            el.style.transition = 'opacity 0.4s '
            el.style.opacity = 1
            el.style.animation = 'right-to-left 0.4s infinite' //动画效果
            el.style['animation-iteration-count'] = 1
            done()
          }, delay)
      } else {
        el.style.opacity = 1
     }
}