各位老铁们好，相信很多人对充满有用的信息！如何优雅简洁地实现一个时钟翻转器（支持JS/Vue/React）都不是特别的了解，因此呢，今天就来为大家分享下关于充满有用的信息！如何优雅简洁地实现一个时钟翻转器（支持JS/Vue/React）以及的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

知识点1：before :after伪元素的使用

知识点2：line-height: 0的妙用

知识点3：变换——原点与视角

知识点4：backface-visibility

知识点5：时间格式化功能的实现

我们开始做吧！

1 翻牌的构建

1.1 基本结构

翻转： 扑克牌外框

down：表示向下翻转效果，对应向上。这将在后面的章节中详细解释。

front:代表前面的卡

back:代表后面的卡

number*: 代表卡上的号码

基本结构的效果是这样的：

1.2 构建纸牌并用伪元素拆分上下两部分

由于每张扑克牌都是折叠并翻转过来的，因此每张扑克牌都需要分成上下两部分。但是HTML中的每张卡片只有一个标签，如何将其拆分为两个呢？这里使用了before 和after 伪元素。

知识点1： 伪元素的使用

因此，之前的“上半部分”是从“顶部（top: 0）”到“距底部一半距离（bottom: 50%）”的部分，并且顶部的两侧是圆角的。

同理，after的“下半部分”就是从“顶部（top: 50%）”到“底部（bottom: 0）”的中间部分，底部两侧都是圆角。

注意代码中的content:”不能省略，否则伪元素不会显示。

效果如下：

回答上一章的问题，为什么底部背景设置为白色？

答案很简单。纸张的内角和元件的外角之间会有轻微的间隙。这个缝隙会露出底部的白色，从视觉上看更加立体。

效果如下：

此时，我们可以将其视为4张小纸，即：

正面顶部：digital.front:before 正面底部：digital.front:after 背面顶部：digital.back:before 背面底部：digital.back:after 由于重叠，只能看到一张卡片。您看到的卡片是背面的卡片。为什么？因为back的HTML是写在front后面的。不过没关系，稍后我们会通过z-index重新调整堆叠顺序，所以先不用担心。

1.3 为纸牌添加文字

还记得刚才的内容：”吗？这用于扑克牌的文本显示。

可以明显看出两个问题：

本应位于背面的背面卡片已移至正面（z-index 问题），并且卡片下半部分的文本应仅显示在下半部分。先解决2题，涉及到第二个知识点。

知识点2：line-height: 0的妙用

说到文字显示，大家肯定会想到基线。也许你也看过这张图：

关于基线的计算，确实很麻烦，我在这里绕了好久。其实换个角度更容易理解line-height:0。请看下图：

当line-height为200px时，每行文字的高度为200px，文字在高度为200px的行间区域垂直居中；

line-height为100px时，每行文字高度为100px，文字在100px高度的行间区域垂直居中；

当line-height为0时，行距为0，中心线的位置也为0，所以容器中只保留下半部分文本。

利用line-height:0的特性，可以轻松实现“下半部”卡片只显示下半部分文字，与“上半部”卡片很好的衔接。

1.4 设置纸牌的层叠关系

首先我们来看“Flip Down”的视频演示，直观感受每张纸的层次关系：

每张纸的z-index可以根据实际图片确定：

啊？怎么了？别担心，这是因为我们只设置了等级，而没有翻转后面的下半张牌。

知识点3：transform-origin和perspective

transform-origin是元素旋转的基点。

变换-origin: 50% 0%;表示将旋转基点设置在水平轴的中点和垂直轴的顶点位置，如下图所示：

rotateX(180deg)表示在X轴上翻转，相当于上下翻转。 X轴已通过transform-origin的第二个参数放置在元素的顶部（Y轴位置：0%）。

根据以上设置，就可以正常显示了，如下图：

现在纸片都已经铺好了，剩下的就是实现CSS3动画和JS交互控制了。

2.1 CSS3翻牌动画

我们以“向下翻转”为例，看一下之前的物理翻转视频：

可以看到，“向下翻”主要涉及到两个元素的动画：

正面卡的上半部分向下翻转180 度。背面卡片的下半部分（当前向上翻转）向下翻转180 度并恢复到原始状态。

显示不正常！为什么？由于前排纸张的上半部分具有最高的z-index，因此当翻转到下半部分时，它仍然会挡住其他纸张。如何优雅地解决呢？超级简单，我们来看第四个知识点：

知识点4：backface-visibility

backface-visibility 指示元素的背面是否可见。默认可见。

这里的要求是，当纸张的前半部分翻转一半（90度）时，它就变得不可见。卡片翻转90度后，正好开始露出元素的背面，所以将backface-visibility设置为hidden可以是一个完美的解决方案！

现在我们来实现一个简单的交互。要求是：

点击“+”将卡片向下翻转，数字为+1。点击“-”，卡片向上翻转，数字为-1。

这段Javascript代码非常冗余，有很多重复的代码。实际产品中，存在多张数字卡，这样处理显然是不可能的。下一章我们会讲如何优雅的封装它，使其能够适应变化。

3 翻牌时钟的实现

我们看一下最终的效果：

3.1 HTML构建

3.2 构建Flipper类

将每个触发器封装成一个类，这样在处理多个触发器时，可以轻松地通过new Flipper() 独立控制每个触发器对象。

这些参数是语义化的并且易于理解。您不必担心参数的顺序。参数的增删改序不会影响业务代码的使用。使用Object.assign 方法用传递的配置参数覆盖默认参数。如果传递的配置中没有属性，则将使用默认配置。当然，这种方法只适用于浅拷贝。

关于原型以及为什么需要设置构造函数，请阅读我的另一篇文章《一张刮刮卡竟包含这么多前端知识点》第4.1章，已经详细解释了。

代码逻辑请阅读注释。

3.3 实现时钟业务逻辑

接下来就是将js绑定到dom上。

请看代码：

知识点5：时间格式化函数的实现

为了方便业务使用，实现了时间格式化方法。这种方法在许多其他业务中都有使用，具有非常普遍的实用价值。

需求是输入日期时间格式要求，输出对应的字符串。

例如：

年-月-日hh:ii:ss 输出：2019-06-02 08:30:37

yy-m-d h:i:s 输出：19-6-2 8:30:37

原则是：无论有多少个数字，先在前面加两个零，然后根据原数字的位数截取。最终输出固定为两位零填充数字。

例如：数字“16”是一个两位数。先加上两个0，成为‘0016’，然后从字符串的索引[2]处截取（2=原数的位数）。由于字符串索引是从[0]开始的，所以[2]对应的是字符串的第三位，输出结果仍然是’16。

同理，数字“8”也是一位数。先加上两个0，成为‘008’，然后从字符串的索引[1]开始截取（1=原数的位数），即从第二位开始截取，输出‘08’ 。

这样就实现了补零功能。

现在看看效果，当前时间可以正确显示。

3.4 运行时钟

4 Vue React封装

由于篇幅有限，这里不再赘述。原理是一样的，但是都是使用Vue和React的API和语法进行封装。

用户评论

疲倦了

终于看到一个关于时钟翻牌器的教程！一直在找类似项目实践一下前端动画效果，感觉这个教程内容非常全面，涵盖了 JS、Vue 和 React 等主流框架。周末一定要试一试!

    有11位网友表示赞同！

关于道别

做网页应用常常会用到简洁的时钟显示，之前都是用标准HTML代码实现的，没想到还会有翻牌式的优雅展示方式！这种效果很有创意，一定比传统的显示更加吸引人眼球。

    有19位网友表示赞同！

纯情小火鸡

干货满满啊！作者真是太厉害了，将各种框架的实现思路都梳理得非常清楚。我一直想学习一下 Vue 和 React 的动画效果实现，这个教程正好可以帮我入门.

    有8位网友表示赞同！

太难

作为一个前端新手，我觉得这个教程讲解得太详细了，有些地方我甚至还需要反复阅读才能理解。不过我相信只要认真学习，肯定能掌握这份珍贵的技术。

    有10位网友表示赞同！

荒野情趣

看完这篇文章我真的受益匪浅！之前一直没有意识到可以使用动画效果来实现时钟显示，看来未来我可以尝试用这种方式给我的项目增添一些新意呢！

    有7位网友表示赞同！

陌上蔷薇

这个教程看起来很不错，但是我觉得对于已经比较熟悉前端动画的开发者来说，可能有些内容过于基础了，可以适当增加一些更高级的技巧或案例分享。

    有18位网友表示赞同！

绳情

作者写的代码示例虽然清晰易懂，但是缺少对不同框架实现细节的对比分析。希望作者以后可以根据实际应用场景提供更多针对性强的解决方案。

    有18位网友表示赞同！

珠穆郎马疯@

我觉得这个教程的内容非常实用，无论你是前端初学者还是经验丰富的开发者，都能从中获得启发。 强烈推荐给所有想学习前端动画效果的朋友们！

    有17位网友表示赞同！

微信名字

我试着用作者提供的代码实现了一个简单的时钟翻牌器，效果确实很令人满意！ 但我觉得可以通过调整动画参数来实现不同的视觉效果，比如速度、旋转方式等。

    有10位网友表示赞同！

猫腻

很喜欢这种优雅简洁的设计思路！这篇文章让我对前端动画的可能性有了更深刻的理解。 以后我也可以尝试用类似的方式提升自己项目的交互体验!

    有19位网友表示赞同！

?亡梦爱人

我觉得这个教程虽然提供了多个框架的实现思路，但缺少对不同框架优缺点的比较分析。 希望作者可以在以后的文章中深入探讨这些区别，让读者更好地选择适合自己的技术方案。

    有11位网友表示赞同！

发呆

我试着用 JS 实现时钟翻牌器，遇到的问题是时间更新逻辑的处理比较麻烦，在不同的代码框架下需要进行多处修改。 这方面希望作者可以提供更全面的解决方案建议!

    有17位网友表示赞同！

冷眼旁观i

文中提到要支持多种动画效果，但我看到的是只有最基本的翻转效果。 其实市场上很多时钟应用会 incorporatescroll 或其他动态效果，期待将来更新更多有趣的效果

    有18位网友表示赞同！

抚涟i

我用 Vue 实现的时候遇到了一个卡顿的问题，感觉可能是动画过于复杂导致的。 希望作者可以针对这种情况提供解决方案或者建议使用更轻量的动画库。

    有8位网友表示赞同！

孤败

这个教程确实非常干货满满！尤其是对前端动画效果这方面比较陌生的同学来说，学习难度不高，能快速上手实现功能。 但是对于一些高级的动画效果，比如三维旋转或粒子特效等，好像没有涉及，可能可以考虑在后续更新中加入这些内容。

    有14位网友表示赞同！

汐颜兮梦ヘ

总感觉这个教程的内容有点过于基础了， 缺乏一些更精细操作技巧的讲解。 例如如何用 CSS 动画代替 JavaScript 实现类似效果，或者如何进行更复杂的动画组合和特效制作等。

    有8位网友表示赞同！