通過點擊事件觸發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 動畫