Axure教程|可自动消失的消息提示框

今天在为前端通过画交互图时，一个交互场景期望用toast来实现消息提醒，特此记录，希望能为axure新手提供参考。

Toast是一种弱提示，本质是在页面中默认隐藏，触发动作以后，提示框先弹出后自动消失。

假设场景是点击一个button后弹出提示框，1秒钟后提示框消失，具体实现步骤如下：

1 控件准备

拖入按钮、动态面板控件；

设置按钮上的文字，比如这里是“点我弹toast”，这里是自定义的；

动态面板的名字命名为“我是toast”，这里也是自定义的；

双击动态面板，进入sate1，拖入控件，设置提示语"我只出现1s，请珍惜！”；

右击动态面板，选择set hidden；

右击动态面板，选择pin to browser，选择弹出的位置在页面中间位置；

2 设置按钮触发动作

下面我们拆解toast发生的顺序，点击按钮后是有两个动作，一个弹出提示框，二是等待1s后消失，那么我们按照这个思路来设置

首先设置onclick事件，show “我是toast”

接下来是设置等待1s然后消失的动作

点击“Add Case”后增加case2，设置等待时间（此处设置1s）和隐藏提示框

设置等待时间方法如下：

好了，设置后preview后发现没达到预期的效果：

因为设置的case1和case2同时发生了，需要手动选择case，那么有什么办法是可以自动进行下去呢？答案是加两个一定能满足的if条件，比如在case1和case2中分别增加如下条件

case2的默认条件是else if条件，右击case2，点击“Toggle IF/ELSE IF”，使得case1和case2的判断条件”是并列的，同时触发。

然后保存，preview就可以看到效果啦~