CSS 绘制三角形原理演示(动画)V4 版

目录

CSS 绘制三角形原理演示(动画)V4 版,具体参见以下链接:

//exp.xiaogd.net/demo/css/css-border/v4/cbt_slide.html
上一个版本曾经留下两个问题,一个是在微软 edge 浏览器上,部分代码高亮增强插件工作不正常,导致整体显示完全崩溃。看了下是某个 DOM 的新增 api 在 edge 上不支持导致的。我的 edge 版本是 14,在 caniuse.com 上显示,它对这个特性的支持度是“Partial support with prefix: ms”,升级 edge 到 15 或以上版本应该可以解决,不过我也没有去尝试升级。
因为用 edge 的程序员应该并不多,这段时间以来原插件也一直没有去修正这个支持,因为整个插件追求的是极简,我估计它们也不会去支持要带前缀的特性,所以这里也不打算去解决这个问题。
另一个问题是某些子步骤不能回退或在回放过程中行为不一致,这次已经修正,所有子步骤可以回退且行为一致。

其它的一些调整:

  1. 在退回到上一张幻灯片时,保持所有已显示的子步骤为显示状态。原先的行为是回去时所有子步骤又重新隐藏,如果读者只是想回去看看之前的状态,又要重新 next 出所有的子步骤,个人觉得这个体验不是太好,而且会导致在回放过程中个别复杂的行为不一致。这个调整部分修改了 impress.js中的源码。
  2. 在部分子步骤呈现过程中使用了动态箭头的引导。我个人感觉时用户在看的过程有可能会失去焦点,因为他有时不知道下一个子步骤会在哪里呈现。当然,你也可能觉得这些是种干扰。这里主要还是想尝试下这种可能性,暂时也写得比较随意,没有将这些行为完全的脚本化。一种更好的引导方式或许是之前介绍的 product feature tour 的那种 mask and highlight 的方式。也初步看了下那种方式,跟 impress 的行为有点类似,估计无法简单整合,后面再看看吧。
  3. 其它的一些小调整及代码方面的部分优化。
就这个主题而言,这个可能是最后一个版本了,不打算再去改进了。个人感觉随着想深入的应用某些特性,impress.js 所施加的限制还是很大,方式也不够灵活。因为它本来的目的也只是用来做 presentation 的,是要结合人的演说的,这里单纯的用于一种被动的展示,受到某些限制也很正常。