vue.js 配合css3 动画

Posted 2020-10-24 圈地自萌

通过点击事件触发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）依次递增。但是动画就是不执行。