![ed434b4edcc9e9ecd0f14d4801dd17a6.png](https://i-blog.csdnimg.cn/blog_migrate/51fa0cdf67377205b0dcf4ed0a57dc3a.jpeg)
![23da27af2901dacd20679b7ee437b2e7.png](https://i-blog.csdnimg.cn/blog_migrate/92ab7f2980c431d79dcdee1122f04348.jpeg)
双十一剁手节过去了,大家应该在很多网页中看到了数字翻牌的效果吧,比如倒计时、 数字增长等。相信很多人都已经自己独立实现过了,我也在网上看了一些demo,发现HTML结构大多比较复杂,用了4个并列的标签来放置前后两个“牌”。本文就来讲解下,如何进一步精简HTML,让结构简单,让JS方法封装得易使用。先来看看最终效果:
![8872ec6a655f4bdf1d244c2ea34bb2b0.gif](https://i-blog.csdnimg.cn/blog_migrate/0f69e0f7928355bde45de38bf65417de.gif)
每个翻牌的HTML结构(精简至2个并列标签):
![d069283c058ec60696ddf0f0efb6a1c7.png](https://i-blog.csdnimg.cn/blog_migrate/7be801331ba2f5eaf29aa2401a6ea0be.jpeg)
本次分享含有很多小技巧,灵活使用能够提升技术水平和工作效率,具体包括以下知识点:
知识点1::before :after伪元素的使用
知识点2:line-height: 0的妙用
知识点3:transform-origin和perspective
知识点4:backface-visibility
知识点5:时间格式化函数的实现
Let's do it!
1 翻牌的构建
1.1 基本结构
首先解释下HTML的结构:
![2d75e2c13998fcb8975c428c07f994d2.png](https://i-blog.csdnimg.cn/blog_migrate/7769011f2e1dcca6ea93e36d1ad89d0b.jpeg)
【说明】
flip: 纸牌的外框
down:表示向下翻牌动效,还有对于的up。后面章节会具体讲解。
front: 表示位于前面的纸牌
back: 表示位于后面的纸牌
number*: 表示纸牌上的数字
flip的CSS代码如下:
![cf2bf749e355426eb98e88b790d711cf.png](https://i-blog.csdnimg.cn/blog_migrate/605acdc1d0d2ea47d4d8ffa0e828d032.jpeg)
这段代码很基础,就不再详细解释了。眼尖的同学可能发现了,为什么要设置background为#fff(白色)呢?最终效果明明是黑的。留个疑问,下一小节就会明白了。
基本结构的效果是这样的:
![d65b4c5c57a12df7d96bf46c0461b510.png](https://i-blog.csdnimg.cn/blog_migrate/4d5f925fa7ed7a4c5969b794c1508a82.jpeg)
1.2 构建纸牌并用伪元素拆分上下两部分
由于每个纸牌是上下对折、翻转的,所以每个纸牌要拆分成上下两部分。可是HTML中每个纸牌只有一个标签,怎么拆分成两个呢?这里就用到了before和after伪元素。
知识点1: 伪元素的使用
先看代码:
![cdc9fb5ea4e65c2022c9f074138caf72.png](https://i-blog.csdnimg.cn/blog_migrate/0d1734b7d37741d0f4d725ab0d1c220b.jpeg)
:before和:after在digital内部生成了两个伪元素,其中,before用来生成纸牌的“上半张”,after用来生成纸牌的“下半张”。
因此,before“上半张”为从“顶部(top: 0)”到“距底一半(bottom: 50%)”的部分,顶部两侧为圆角。
同理,after“下半张”为“距顶一半(top: 50%)”到“底部(bottom: 0)”的部分,底部两侧为圆角。
注意代码中的 content:"" 不能省略,否则伪元素是不显示的。
效果如下:
![b494959a59e58c66c5528332cd9272bd.png](https://i-blog.csdnimg.cn/blog_migrate/ce427cb62a66126b408d9f281eba3025.jpeg)
回答上一章节的问题,为什么底层设置background为白色?
答案很简单,元素内部的纸片边角和外层边角之间会有一点点的缝隙,这个缝隙会露出底部的白色,从视觉效果上看,更加具有立体感。
然后,为上下部分中间添加一条水平折线。
![8d05b1250b4f78dde3f293a81f21ce4f.png](https://i-blog.csdnimg.cn/blog_migrate/1b3047546dbc118b31df97e21f3552ee.jpeg)
外层flip添加box-sizing: border-box保证了下边框不会影响元素的原有高度。
效果如下:
![8f343e7a8ae67782fe30a7405536a1b2.png](https://i-blog.csdnimg.cn/blog_migrate/8b37d8aa589fbc6ccdc5c690c9680a9f.jpeg)
到这里,我们可以认为是4个小纸片,分别是:
- 前上:.digital.front:before
- 前下:.digital.front:after
- 后上:.digital.back:before
- 后下:.digital.back:after
由于重叠在一起,只能看到一张纸牌。而看到的这个纸牌是后面(back)的纸牌,为什么呢?因为back的HTML写在了front的后面。不过没关系,后面我们会通过z-index来重新调整层叠顺序,先不着急。
1.3 为纸牌添加文字
还记的刚才的 content: "" 吗?纸牌的文字显示就用到了这个。
先通过CSS定义好0~9的数字:
![e2c96b1e2ab7af399a3978f3c2939fb7.png](https://i-blog.csdnimg.cn/blog_migrate/d56e37ca1551525ce712fae0eeecdd2c.jpeg)
现在效果如下:
![6ac8c2f2cbf925be3ca68e96f87c9330.png](https://i-blog.csdnimg.cn/blog_migrate/2da2f79b40992a345b7d4197c59df66c.jpeg)
可以很明显的看到两个问题:
- 本应该在后面的back纸牌跑到了前面(z-index问题)
- 下半张纸牌的文字应该只显示下半部分。
先来解决问题2,这里就涉及到了第二个知识点。
知识点2:line-height: 0的妙用
提到文字的显示,肯定会想到基线(baseline),可能你也曾经看过这个图:
![764c9504e9b8f1da071373ffec323580.png](https://i-blog.csdnimg.cn/blog_migrate/2b8d8d160a3758a721cf85f63555dfb2.jpeg)
关于基线(baseline)的计算,确实很麻烦,我也在这里绕了很久。其实理解line-height:0可以换个角度,会更容易理解,请看下图:
![b49f64cf4c31e00a549bca577da722c1.png](https://i-blog.csdnimg.cn/blog_migrate/f4fef07fd7c960971088707e2413b5be.jpeg)
当line-height为200px,每行文字高度为200px,文字在200px高度的行间区域垂直居中;
当line-height为100px,每行文字高度为100px,文字在100px高度的行间区域垂直居中;
当line-height为0时,行间距为0,中线的位置也为0,所以文字只有下半部分留在容器内。
利用line-height:0的特性,就可以很轻易实现“下半张”纸牌只显示文字的下半部分,并且与“上半张”纸牌很好的衔接在一起。
在代码中设置line-height为0:
![50a338858a9369a91c71c69f875be26f.png](https://i-blog.csdnimg.cn/blog_migrate/ab083c13be0a8018ab3f53989c747610.jpeg)
效果如下:
![550d69e24995f64748851eb61bd2e94d.png](https://i-blog.csdnimg.cn/blog_migrate/7589119a3848bf741b67a3ab123f85e2.jpeg)
1.4 设置纸牌的层叠关系
首先,先看下“向下翻牌”的视频演示,直观感受下每个纸片的层级关系:
![a50c7f81c7d6fd6cfd00b6d24996092f.gif](https://i-blog.csdnimg.cn/blog_migrate/120914873faa413e8a014d5cdb16830a.gif)
按照实物图就可以确定每张纸片的z-index:
![ebd7e274fd375a3c33062439793afad6.png](https://i-blog.csdnimg.cn/blog_migrate/1e3b9dedc683d09ced0055bde663fff2.jpeg)
添加以下CSS代码:
![8524b5e4ec0f93bc078e6d4a3897a922.png](https://i-blog.csdnimg.cn/blog_migrate/dbedc0efa26ab8ab946fee28e14f2119.jpeg)
现在效果如下:
![1c844eb0286a96d7bf31e44aae02b01f.png](https://i-blog.csdnimg.cn/blog_migrate/711ea46ae43c58324119e87462f5a1f4.jpeg)
咦?怎么不对?别着急,这是因为我们只设置了层级,但是没有把后面纸牌的下半部翻转上去。
添加翻转代码:
![3d9dead335da1f0fc84942b8c0138884.png](https://i-blog.csdnimg.cn/blog_migrate/4c83fb03a92e4e562c74abb0532904c0.jpeg)
这里涉及到了知识点3。
知识点3:transform-origin和perspective
transform-origin 是元素旋转的基本点。
transform-origin: 50% 0%; 表示将旋转基本点设置在横轴的中点,纵轴的顶点位置,如下图所示:
![3b5d4b165a387bc8a4a5a8bcaa7d0e78.png](https://i-blog.csdnimg.cn/blog_migrate/1f966a2d43b29b651fea8a658d2cb0ca.jpeg)
perspective(160px) 可以理解为立体透视图的景深。在本次分享的效果中,我们的视角是正对牌面,并且纸牌位于视角中间。所以 transform-origin的第一个值(X轴位置)为50%。
rotateX(180deg) 表示以X轴进行翻转,对应这里就是上下翻转。这里已经通过transform-origin的第二个参数(Y轴位置:0%)将X轴放在了元素顶部。
基于以上设置,已经可以正常显示了,如下图:
![14f951233e011796a34ecdcc2a8e7ded.png](https://i-blog.csdnimg.cn/blog_migrate/bcfc28de9da7ab018de15ed68a8d8f29.jpeg)
同理,“向上翻”也需要进行设置下。大家可以自己折两个纸片,参照上面的方法,应该很容易实现。这里不再重复讲解,直接放上代码,大家可以对比下哪里不同:
![0303612bd0f295a483d9c0d3212ce660.png](https://i-blog.csdnimg.cn/blog_migrate/36dfa76bd5a93f15074465a312457f56.jpeg)
2 翻牌动画的实现
现在纸片都已摆好了,剩下的就是实现CSS3动画,以及JS交互控制。
2.1 CSS3翻牌动画
我们还是以“向下翻”为例,再来看下之前的实物翻牌视频:
![a50c7f81c7d6fd6cfd00b6d24996092f.gif](https://i-blog.csdnimg.cn/blog_migrate/120914873faa413e8a014d5cdb16830a.gif)
可以看到,“向下翻”主要涉及两个元素的动画:
- 前面纸牌的上半部向下翻转180度。
- 后面纸牌的下半部(目前已翻转上去)向下翻转180度恢复原状态。
![6f400e10a3870448f3f2bdb53733d49d.png](https://i-blog.csdnimg.cn/blog_migrate/62ccadf82f73b97aec69064212a60fee.jpeg)
直接上代码:
![4d247068c354c3c0b666d51c5f34f444.png](https://i-blog.csdnimg.cn/blog_migrate/16e06886d415f1bce3498650655e6108.jpeg)
以上代码涉及的知识点和原理没有新的东西,都已经讲解过了,就不详述了。box-shadow是为了给纸片的上边缘加一点白光,视觉效果更好一点。否则在翻转的时候,跟后面元素都是黑色,融在一起了。看看现在的效果:
![0b8273f79d8f3269399b2f4718158455.gif](https://i-blog.csdnimg.cn/blog_migrate/51e0f1ce678fd0b31afa3c251d7a24f8.gif)
显示不正常!为什么?因为前排上半部纸片的z-index最高,所以它在翻转到下半部的时候仍然遮挡住了其他纸片。怎么优雅的解决?超级简单,来看看第四个知识点:
知识点4:backface-visibility
backface-visibility表示元素的背面是否可见,默认为visible(可见)。
这里的需求是,当前面上半部纸片翻转到一半的时候(90度)进入不可见状态。而纸牌翻转90度以后,正好是显露元素背面的开始,所以将backface-visibility设置为hidden即可完美解决!
修改代码如下:
![a4231d9fbe26ced3d3cef4731ce5c900.png](https://i-blog.csdnimg.cn/blog_migrate/c1638e6be823e854cc6fc5774f1f134e.jpeg)
现在效果很完美!
![1f044de70a619905ee717af7ca3284f4.gif](https://i-blog.csdnimg.cn/blog_migrate/8cb69cc90986e3b62bcf878d4d0cc599.gif)
大家可以试着自己实现向上翻转效果,代码直接放出:
![efa774efc1e2490e8c4d08cc76c62fda.png](https://i-blog.csdnimg.cn/blog_migrate/e922284bac52ec4f0588603f76f21a7b.jpeg)
2.2 JS实现翻牌交互
现在我们来实现一个简单的交互。需求是:
- 点击“+”,向下翻牌,数字+1
- 点击“-”,向上翻牌,数字-1
首先,修改下HTML:
![ba2e96834c5b8755d9bf5cbf80f27354.png](https://i-blog.csdnimg.cn/blog_migrate/1d7361e11bc3de78c5ea1a2301a15505.jpeg)
配套的CSS如下,仅为了demo好看,无实际作用:
![7562377ba8bd7f20e58886f48286adbb.png](https://i-blog.csdnimg.cn/blog_migrate/999db9a4eef0a73d4346250966619153.jpeg)
Javascript代码如下:
![47e4c3c421c41ec7c2e85160f7d063f0.png](https://i-blog.csdnimg.cn/blog_migrate/baf793511827c1e09ae7e42dafac6973.jpeg)
先看下交互效果:
![801a3f2cb95e64bd93a86e448e80ab31.gif](https://i-blog.csdnimg.cn/blog_migrate/19a33c568da2408f8d84a15d6fafa2ee.gif)
这段Javascript代码很冗余,重复代码很多。在实际产品中,都是多个数字牌,这种方式显然无法应对。下一章节,我们来说下如何优雅的封装,以不变应万变。
3 翻牌时钟的实现
先看下最终效果:
![8872ec6a655f4bdf1d244c2ea34bb2b0.gif](https://i-blog.csdnimg.cn/blog_migrate/0f69e0f7928355bde45de38bf65417de.gif)
3.1 HTML构建
HTML代码如下:
![dbf3b4fddbd20d55d9674a354ab46281.png](https://i-blog.csdnimg.cn/blog_migrate/49ba0bb48de7b544d0b3aeeb551c7337.jpeg)
CSS代码如下(之前章节的CSS代码请保留):
![a2a24e8d3e0c2daf8181bb5819807429.png](https://i-blog.csdnimg.cn/blog_migrate/e53092979f13925ae1824fda1477abd9.jpeg)
效果如下,剩下的就是JS部分了。
![2ae27e8f13e654173e4bb058538241a0.png](https://i-blog.csdnimg.cn/blog_migrate/91e65d3552505515f6095db561e14f31.jpeg)
3.2 构建Flipper类
将每个翻牌封装成类,这样在应对多个翻牌的时候,可以方便的通过new Flipper()去独立控制每个翻牌对象。
类的实现代码如下:
![6732af6f15f4046c72676ce8e4f25b75.png](https://i-blog.csdnimg.cn/blog_migrate/c6571b86efeafd3015ec76a4c231825c.jpeg)
可以注意到,Flipper的传参只接受一个对象形式的参数config,使用对象的方式向函数传参有很多优点:
- 参数语义化,方便理解
- 不用在意参数顺序
- 传参的增删和顺序调整不会影响业务代码的使用
使用Object.assign方法,可将传递进来的config参数覆盖默认参数。传递的config中没有的属性,则使用默认配置。当然,这种方式只适用于浅拷贝。
关于prototype,以及为什么要设置constructor,请阅读我的另一篇文章《一张刮刮卡竟包含这么多前端知识点》第4.1章节,已经讲解得很详细了。
代码逻辑请阅读注释。
3.3 实现时钟业务逻辑
接下来的工作就是将js与dom进行绑定。
请看代码
这段代码一定要放在Flipper类代码的下面,Flipper.prototype一定要在业务逻辑代码之前执行,否则会报错找不到Flipper内部方法。
![a8070621a82736d721cb835890d43616.png](https://i-blog.csdnimg.cn/blog_migrate/e27ced0991c75b39c0a0015e138a884d.jpeg)
代码逻辑不难,请阅读注释。比较值得分享的是其中的时间格式化函数formatDate。
知识点5:时间格式化函数的实现
为了方便业务使用,实现一个时间格式化方法,这个方法在很多其他业务中都会使用到,具有很普遍的实用价值。
需求是通过输入日期时间格式要求,输出对应的字符串。
例如:
yyyy-mm-dd hh:ii:ss 输出:2019-06-02 08:30:37
yy-m-d h:i:s 输出:19-6-2 8:30:37
先看代码:
![a42ca36f476da099ebb1775d93589b6a.png](https://i-blog.csdnimg.cn/blog_migrate/a85cfbd63515e4055be635ecb7f7576c.jpeg)
代码逻辑请阅读注释,这里再补充下“日期时间补零padLeftZero”函数的说明。由于月、日、时、分、秒最多为2位数,所以这里只考虑最多补一个0的情况。
原理是:不管数字是几位,先在前面补两个0,再根据原数字的位数进行截取,最终输出固定为两位的补零数字。
例如:数字"16"是两位数,先补两个0变成"0016",再从该字符串的索引[2]开始截取(2=原数字的位数),由于字符串索引从[0]开始,所以[2]对应字符串的第3位,输出结果仍为"16。
同理,数字"8"是1位数,先补两个0变成"008",再从该字符串的索引[1]开始截取(1=原数字的位数),即从第2位开始截取,输出"08"。
这样就实现了补零的功能。
现在看下效果,已经可以正确显示当前时间了。
![1d86dc586aa3ef586067c8418b11461d.png](https://i-blog.csdnimg.cn/blog_migrate/8bcb3238f8dad3f2fb94e13afc2953bd.jpeg)
3.4 运行时钟
万事俱备,只差加个定时器让时钟翻动起来。
![0b9aab9b5a61307a6806f75df64c0926.png](https://i-blog.csdnimg.cn/blog_migrate/91c3743a1ef23f8ba36eda284cf2ca44.jpeg)
这段代码逻辑很简单了,主要就是进行前后时间字符串的对比,然后设置纸牌并翻转。最终效果:
![8872ec6a655f4bdf1d244c2ea34bb2b0.gif](https://i-blog.csdnimg.cn/blog_migrate/0f69e0f7928355bde45de38bf65417de.gif)
4 Vue & React封装
由于篇幅有限,这里不再详述,原理都是一样的,只是利用Vue和React的API和语法进行封装。
原生JavaScript、Vue、React三个版本的演示源码请到本文对应的github下载:
https://github.com/Yuezi32/flipClock
本次分享讲解了如何优雅地实现结构简单的翻牌时钟,并对JS进行了科学高效的封装。其中也涉及到了CSS3的一些知识点和技巧。希望能对大家的工作有所帮助。