首页 > Web开发 > 详细

vue.js 配合css3 动画

时间:2018-02-14 16:57:28      阅读:215      评论:0      收藏:0      [点我收藏+]

通过点击事件触发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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!