通过点击事件触发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）依次递增。但是动画就是不执行。
vue.js 配合css3 动画
原文地址：https://www.cnblogs.com/dodocie/p/8448509.html