BubbleのConditionalとTransitions

このページでは、Bubbleのエレメント設定における、ConditionalとTransitionsについて記載

①Conditional

指定した条件のもとで、エレメントの設定を変更することができる

WorkFlowと相似しているが、大きく違う

• Workflowは変化ベース：「Aをした時に、Bをする」
• Conditionalは状態を定義：「Aの状態の時に、Bの状態にする」

設定方法

以下の状態を定義すると仮定して記載

• Button：マウスホバーで色が変わる
• Inputフォーム：空欄の時は、ボタンクリックできない＆空欄ではな時はクリックできるようにする

Button

1. Buttonエレメントを設置
2. エディター>Conditionaタブを開く
3. Define anothe conditionをクリック
4. 以下の2つの条件を設定する
   1. When This Button is hoverd：「ボタンにマウスホバーした時」
   2. Back ground color、Font size：「ボタンの背景色が赤になる」₊「フォントサイズが24pxになる」
      1. 赤色はカラーコード、フォントサイズは数値をそれぞれ入力

Inputフォーム

1. inputフォームとボタンを設置する
2. ボタンエディター>Conditionalタブを開く
3. 以下の2つの条件を設定する
   1. When InputA's value is empty：「Inputフォームが空欄の時」
   2. This element isn’t clickable：「このエレメントはクリックできない」
4. This element isn’t clickableのチェックボックスにチェックを入れる
5. This element is visibleにもチェックを入れる
   1. チェックがされていないと、そのエレメントは表示されない

その他

さらに「クリックできない」ということを、見た目でもわかりやすくする

• Back ground colorの透明度を「30-40」の間に設定する
  • プレビューで確認すると、フォームが空欄の時はクリックできない仕様かつ、テキスト入力すると色が濃くなり、クリックできるため

②Transitions

エレメントで定義した見た目の変化する時間を調整する機能

アラートの表示時間の調整と相似

以下の設定すると仮定して記載

• 現在設定しているボタンのホバー変化速度を「少し遅く」する

設定方法

1. Transitionalsタブをクリック
2. Back groundStyleに対して変更したいため、検索して選択
3. 時間を1000ms（ミリ秒）を入力
4. animationのタイプをEase inを選択
5. ボタンのホバー変化速度を「少し遅く」する設定完了