从白天→到黑夜→到白天→到黑夜……

一个神奇的组件

通过特定位置的点击，让全文反复发生切换？而这还只是神奇的 E2.COOL「坍塌盒子」组件的一种应用而已。

坍塌盒子，顾名思义，指点击后该结构的高度坍塌至 0，内容消失且下方结构即刻进场。无论是科沃斯的《活力白天VS灵感深夜，你是哪一派？》中全文结构的双重模式伪无限次切换，还是 Graff 《璀璨心愿》一文中所实现的重复抽签结构 、又或是雷克萨斯《确定？行！》一文中滑动进场且 GIF 控制播放结构，坍塌盒子都起到关键性作用，也可见其应用之广泛。

当然，精妙的组件能够发挥的场景也不会仅限于此，坍塌盒子作为结构的基础框架，辅以零高容器和占位的配合，便可灵活得搭建起各式各样的复合结构。本文将演示坍塌盒子构建复合模型的具体操作方法。

❶

 

全文切换

上文模型演示了科沃斯《活力白天VS灵感深夜，你是哪一派？》一文中白天黑夜模式下内容的两种状态，点击开关，全文即可在两种模式下进行有限次的切换。同样形式的文章还有 ColorOS 的《你更喜欢我的哪一面？》、MLB 的《查看你的MBTI结果》等。

如果你需要素材包进行练习，并理解素材的基本结构特性，则可以在「黑科技编辑器」公众号回复「坍塌盒子」获取已经准备好的图包素材。

素材建议

两种模式下的总高度保持一致，按钮所在位置保持一致。

所需组件

该模版所需组件位置

「高级组件」大类模版中的「坍塌盒子」组件，在其嵌套区中放置切换部分的正文内容。此组件含有两种形式，可以在筛选器中切换坍塌盒子（自定义）版。

「坍塌盒子」组件由「画面素材」决定总高度，并可以通过热区功能划定热区范围，适合总高度较短的素材使用。「画面素材」既可使用一张完全透明的占位图，又可固定为一张浮层元素。

「坍塌盒子（自定义）」组件可自定义画布尺寸和热区位置，灵活性和通用性更高，需配合 PS 或 AI 等工具获取具体参数。

「高级组件」大类模版中的「零高容器」组件，由占位组件固定结构总高度，便可在零高容器中无限填充正文内容。配合坍塌盒子使用时，即可实现点击后结构消失下层内容进场，完成伪无限次连续点击切换的效果。

「高级组件」大类模版中的「置顶框架」组件，承载最后一次点击后的全文内容。

「高级组件」大类模版中的「占位」组件，固定全文高度。

实现方法

1）登录 E2.COOL 黑科技编辑器，首先搭建外层框架。在「高级组件」中选择「零高容器」和「占位」组件，并在占位中填写素材的总高度。以科沃斯的此篇文章为例，这里的宽高分别为 750、3100。

2）在零高容器中具体填充正文内容。在嵌套区中拖入「高级组件」中的「坍塌盒子」，并上传「画面素材」。

「画面素材」将会置于结构的顶层，决定了坍塌盒子的尺寸高度。当然，如果没有置顶素材的需求，你也可以像本文一样上传一张完全透明的图片用于撑开高度。

在「坍塌盒子」的嵌套区中完善白天模式下的结构素材。

企业会员通过热区功能划定触发范围，注意避免和嵌套区内附有交互效果的区域重合。

3）再次拖入「坍塌盒子」，或直接复制白天模式的「坍塌盒子」，搭建黑夜模式结构，并通过热区功能调节触发位置。

4）利用复制功能，依次复制出多个白天和黑夜模式的坍塌盒子，达到多次点击的目的。点击组件名称折叠结构，拖动更改前后顺序。

5）此时结构已搭建近尾声，为了防止最后一次点击后内容全部消失，在结构末端拖入「置顶框架」组件，上传最终画面。

完成，通过预览区查看动画效果。

❷

 

图片消失-滑动出现

（GIF 控制器）

如上文结构所示，点击后封面消失，滑动出现且滑动第一屏内的 GIF 动画由第一帧开始播放。该结构应用于雷克萨斯中国的《确定？行！》。

实现方法

1）使用「零高容器」和「占位」组件搭建支撑结构，在「占位」中填写画布尺寸。以雷克萨斯中国的此篇文章为例，这里的宽高分别填写为 900、1121。

2）拖入「坍塌盒子」组件，在筛选器中选择「坍塌盒子（自定义）」。

在上一个模型中我们演示了「坍塌盒子」的使用方法，利用「画面素材」确定画布尺寸并通过热区功能设置触发位置。「坍塌盒子」和「坍塌盒子（自定义）」并无本质上的区别，相对于「坍塌盒子」来说，「坍塌盒子（自定义）」更可以不受限制的调整画布尺寸和热区位置。此处我们便演示「坍塌盒子（自定义）」组件的使用方法。

填写「画布宽度」和「画布高度」。为了实现 GIF 进场后开始播放的效果，建议「画布高度」填写的值大于全文总高度，避免滑动后 GIF 提前加载。以雷克萨斯中国的此篇文章为例，这里分别填写为 900、30000。

嵌套区中拖入「无缝图（深色模式高亮）」，上传封面素材。

通过 Photoshop 工具可以获取触发热区所在位置的详细信息。

1. 确定素材图片的宽度小于等于 1080 px。

2. 打开 PS 工具，使用矩形工具划定热区位置。

3. 在「属性」栏中查看矩形的横坐标（X）、纵坐标（Y）、宽度（W）和高度（H）。

4. 将信息填写至编辑器中的相应位置。

3）在坍塌盒子的下方拖入「置顶框架」，上传后续的滑动素材。

完成，通过预览区查看动画效果。

❸

 

重复抽签

该结构先后在 Graff 《璀璨心愿》和雷克萨斯中国《赏灯！》中使用，实现了多次抽签的效果。提示建议将触发抽签热区和触发坍塌盒子热区的位置分开设计。

实现方法

1）使用「零高容器」和「占位」组件搭建支撑结构，在「占位」中填写画布尺寸。以 Graff 的此篇文章为例，这里的宽高分别填写为 1080、1768。

2）拖入「坍塌盒子」组件，在筛选器中选择「坍塌盒子（自定义）」。

根据素材尺寸，填写「画布宽度」和「画布高度」。以 Graff 的此篇文章为例，这里分别填写 1080、1768。

嵌套区中拖入所需的抽签组件，这里以「幸运抽签-切换式」组件为例，上传所需素材。

通过 Photoshop 工具可以获取触发热区所在位置的详细信息。

1. 确定素材图片的宽度小于等于 1080 px。

2. 打开 PS 工具，使用矩形工具划定热区位置。

3. 在「属性」栏中查看矩形的横坐标（X）、纵坐标（Y）、宽度（W）和高度（H）。

4. 将信息填写至编辑器中的相应位置。

3）使用复制组件功能，增加重复次数。

4）在结构末端拖入「置顶框架」组件，上传最终画面。

完成，通过预览区查看动画效果。

更多海量模板，平均不足 1 元！

E2.COOL 秉持着让行业“人均 SVG”的生态理念，由多位黑科技排版设计的头部资深开发者共同打造，帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议，也欢迎通过客服向我们提出，E2 将竭诚思考代码转化的可行性。

E2 平台官网

https://www.e2.cool/

会的比别人多一点