加入官方微信群

使用微信扫描二维码
或搜索 weweloo 添加微信好友

返回
MooKwai特色块翻转卡片

翻转卡片

翻转卡片(Flip Card)可实现容器正反两面的内容,并通过翻转的交互动画形式切换。

文章目录

区块与子区块

翻转卡片由翻转卡片区块与翻转卡片-正面与翻转卡片背面两个子区块共同组成

  • 翻转卡片区块
    • 翻转卡片-正面
    • 翻转卡片-背面

内容

分别对正面区块与背面区块进行设置,区块内可插入其他任何区块。

配置选项

翻转卡片

全局样式

Select 设置区块对应的全局样式。

Html标签

Select 区块根元素的 Html 标签类型。

交互设置

触发

Select 设置卡片翻转的触发事件。

旋转轴

Select 设置卡片翻转的轴方向。

反向

Boolean 将翻转的方向更改为默认方向的反方向。

自动回放

Number 设置自动回放的触发时间,0 ~ 100 之间的任意数值,整数或浮点数。0表示不启用自动回放。

持续时长

Boolean 设置翻转的动画持续时间。0 ~ 100 之间的任意数值,整数或浮点数。

延时

Boolean 设置翻转的动画延迟播放的时间。0 ~ 100 之间的任意数值,整数或浮点数。

动画曲线

Select 翻转动画的加速度曲线。

自定义曲线

String 自定义曲线函数,为 GSAP 动画曲线,设置方式可参考 GSAP Eases Docs

设备

Select 选择启用的设备。

元素

<div class="mk-flip-card">
  <div class="el-front el-surface">...内部区块</div>
  <div class="el-back el-surface">...内部区块</div>
</div>
  • 主容器 .mk-flip-card
  • 正面 .el-front
  • 背面 .el-back

其他

  • 翻转卡片主区块内仅支持插入翻转卡片子区块(正面与背面两种区块),区块不可进行添加或删除;
  • 可通过区块工具栏上方的翻转按钮切换正面与背面的显示,以分别对不同面的内容进行设置。

使用微信扫描二维码
或搜索 weweloo 添加微信好友

加微信
进群聊聊(๑•̀ㅂ•́) ✧