当前消息！vue列表逐个进入过渡动画

2023-05-29 15:10:50 来源：博客园

(相关资料图)

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

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

1.vue3代码，

<script setup>import { reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed } from "vue"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>

2.过渡动画放在统一放在一个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 = 0const 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     }}

关键词：