通过点击事件触发v-for渲染的列表各项动画
methods : { adviceFadeIn() { this.$refs.adviceList.forEach((v, i) => { var delay = i*60 var bottom = 0 //清空bottom的值。 v.style.bottom = ‘-2rem‘ //确保每次点击触发动画前先让列表归位。 setTimeout(() => { bottom = (2.5*(this.$refs.adviceList.length-i))+1 v.setAttribute(‘style‘, ‘bottom:‘+Number(bottom)+‘rem;‘) v.style.opacity = 1 }, delay) }) }, }
css:
.question-list{ position: absolute; opacity: 0; bottom: -2rem; left: 1.5rem; font-size: .84rem; width: 14rem; } .question-list{ transition: all .5s linear; }
不知道为什么这里只能用setTimeout
setAttribute(‘style‘, ‘transition: all .5s linear‘ + i + ‘s’;‘)
可以看到这段css属性确实被写到html行内style,并且每个列表的速度(i)依次递增。但是动画就是不执行。
原文地址:https://www.cnblogs.com/dodocie/p/8448509.html
时间: 2024-10-07 01:36:04