vue.js 配合css3 动画

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

vue.js 配合css3 动画的相关文章

如何使用js捕获css3动画

如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-animation: flash 1s ease 3; -moz-animation: flash 1s ease 3; -ms-animation: flash 1s ease 3; -o-animation: flash 1s ease 3; animation: flash 1s ease 3;

move.js操作CSS3动画

move.js是一款简单的支持CSS3动画的JavaScript库,对于对CSS3的操作不是很熟悉的人来说,使用move.js提供的方法操作CSS3动画更简单方便. 要想使用move.js提供的方法,首先应在我们的HTML页面中引入move.js: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8

JS模拟CSS3动画-贝塞尔曲线

一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线,它能过优雅地模拟人手绘画出的线.它通过控制曲线上的点(起始点.终止点以及多个参考点)来创造.编辑图形.其中起重要作用的是位于曲线中央的控制线.这条线是虚拟的,中间与贝塞尔曲线交叉,两端是控制端点.移动两端的端点时贝塞尔曲线改变曲线的曲率(弯曲的程度):移动中间点(也就是移动虚拟的控制线)时,贝塞尔

vue.js 过渡和动画

Vue 在插入.更新或者移除 DOM 时,动态添加css类名来达到想要的动画效果 1.transition标签 给元素包裹一个transition标签,并设置name属性的值,这个值可以随意设置,但是他会决定Dom更新时自动添加的css类名 这里name="xxx"作为演示 <div id="app"> <button @click="isShow = !isShow">点我切换显示隐藏</button> &l

js 模拟css3 动画1

<html> <head> <title> javaScript缓动入门 </title> </head> <body> <style type=text/css> #taxiway { background: #e8e8ff; width: 800px; height: 100px } #move { background: #a9ea00; width:100px; height:98px; border:1px so

js 模拟css3 动画2

<html> <head> <title> javaScript缓动入门 </title> </head> <body> <style type=text/css> #taxiway { background: #e8e8ff; width: 800px; height: 100px } #move { background: #a9ea00; width:100px; height:98px; border:1px so

js 模拟css3 动画3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

vue.js加入购物车小球动画

http://www.cnblogs.com/yuxingyoucan/p/7063881.html 生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小球的轨道和方向,内层控制动画小球的运行状态 动画使用vue的js钩子实现 因为小球动画只有一个方向(只执行单方向从上到下滚落),所以只用了before-enter,enter,after-enter

Vue.js 系列教程 5:动画

原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没有详细的校对,其中仍然有很多不易理解的地方.我和原作者的初衷一样,希望大家能够通过这个系列文章有所收获,至少可以增加学习的乐趣,我也在学习的路上,所学心得必将与大家共勉. 这是 JavaScript 框架 Vue.js 五篇教程的第五部分.在这个系列的最后一部分,我们将学习动画(如果你了解我,你知道这一章迟早会来).这不是一个完整的指南,