美文网首页
vue.js css3 开奖动画

vue.js css3 开奖动画

作者: bartflyian | 来源:发表于2019-05-23 12:34 被阅读0次

添加示例项目地址:https://gitee.com/bartflyian/awardResult-animation/tree/master/award_animation

记录开发问题,温故而知新。

这次遇到需求想要做一个开奖结果的动画效果。本来认为用css的transition就可以全部完成,但要求最后一个结果需要3种不同的呈现效果。最后的结果如下:

其中一种(中间停顿后倒回)gif录制的有些卡顿的感觉

OK,最基本的是先写5个方框,并将其背景图设置为

背景图

这个是具体的html和css(init值是判断是否首次加载组件,避免在首次加载时触发动画)

5个方格的样式

第5个格子的keyframes动画样式 ($num 这个标识点是我业务上需要才添加的,styleNum就是用来区分需求里的3种不同动画效果,因为后面是动态修改样式,所以keyframes的样式值是初始值而已,具体的在下面setKeyframes()中设置样式)


接下来是按动画的开始结束来:

当前端监听收到结果改变时,执行动画函数animation(),贴下代码

额,截得不好,和下面一张合并的

那么比较复杂的就是findkeyframesrule和setkeyframes这两个了,这两个是为了最后一格的keyframe动画可以动态修改样式值(如果有其他方法可以去动态修改keyframe动画的值,可以留言告诉我)

setKeyframes的分两个图截

篇幅有点长可能看的蒙,总的来说就是:

监听到结果改变 ---> 根据结果值动态修改样式(前4格用$refs追踪到节点直接修改style,最后一格因为用到keyframes动画,所以还需要用findkeyframesrule和setkeyframes去修改样式表的值)---> 动画结束后删掉class(animation)

浏览过程中有哪些问题可以一起探讨解决

相关文章

  • vue.js css3 开奖动画

    添加示例项目地址:https://gitee.com/bartflyian/awardResult-animati...

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes ...

  • 08_dayCSS动画

    CSS3新增的功能有:过渡和动画,阴影和圆角 css3过渡动画: css3都有哪些新增的东西 : 过度,动画,阴影...

  • CSS3 动画

    CSS3 动画CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。 ...

  • CSS3 动画

    动画属性 动画(animation)是CSS3新增的属性,动画属性可以为元素创建动画,CSS3以前在网页上实现动画...

  • css3动画

    css3动画 CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的...

  • 纯CSS3绘制的逼真,呆萌,超酷的CSS3动画

    纯CSS3人物行走动画 逼真炫酷CSS3动画 CSS3实在是太强大了,今天分享的CSS3动画非常神奇,它可以模拟人...

  • 关于js动画和css3动画的差异性你了解吗?请简单谈一下

    css3动画:css3之后添加了transform动画计算函数,所以实现动画更为简单方便,并且transform矩...

  • 过度动画

    css3过度动画 css3都有哪些新增的东西 : 过度,动画,阴影,圆角; transition : width ...

网友评论

      本文标题:vue.js css3 开奖动画

      本文链接:https://www.haomeiwen.com/subject/ccuyzqtx.html