みなさんこんにちは！ Ryoです！
普段は学生NoCodeエンジニアとして、Bubbleをメインとした受託開発を行ったり、NoCode学生会という学生限定のNoCodeオンラインサロンの運営をしております。
今回は、以下のように、ボタン（または任意の要素）がホバーされたときにGroupFocusを表示するための方法をご紹介します。
.bubbleにてWebアプリを作る際には、ホバーアニメーションはよく使われるので是非マスターしてほしいと思います！
それでは行ってみましょう！
配置するエレメントの基本設定
まずButtonエレメントを設置します。
このButtonエレメントはホバーするために使うため、ここでは[ホバーボタン]と呼びます。
次にホバーボタンが、ホバーされた時に表示するためのGroupFocusエレメントを設置します。
場所に関してはどこでも大丈夫です。
そしてエディターのReferance elementの部分に[Button ホバーボタン]を選択します。
この操作によって、GroupFocusがホバーボタンに付随するようになります。
次にGroupFocusをホバーで、表示させるためのトリガーとなるボタンを設置します。
このボタンは全くボタンの役割をしません。
エレメントの中でボタンが1番分かりやすいと考えたため、ここではボタンエレメントを使っています。
なのでInputエレメントなどでも代用することができます。
また、このボタンはユーザーには一切見えないようにするためここでは「隠れボタン」と呼びます。
次に、このボタンのエディターを開きます。
そこでStyleの部分の設定が[Primery Button]になっているためRemove Styleを押してStyleをなくします。
そして、完全に透明にするためにColorの初期設定で[100]となっている部分を0にします。
これをすることによって彩度がなくなり透明になります。
そしてThis element is visible on page loadのチェックを外します。
Conditionalの設定
次にこの隠れボタンのConditionalの設定をします。
まずWhenの部分に[Button ホバーボタン is hovered or GroupFocusA is hovered]と入力します。
そしてSelect a property to change when trueの部分には[This element is visible]を選択します。
そしてチェックを入れます。
この一連の操作によって、ホバーボタンまたはGroupFocusがホバーされている間は隠れボタンが表示されることになります。
ちなみに明度が0になっているのでユーザーには見えないようになっています。
ワークフローの設定
次に、ワークフローを設定して2つのイベントを作っていきます。
まずワークフローのClick here to add an event…のGeneralから[Do When Condition is True]を選択します。
そしてRun thisの部分を[Every time]に変更ます。
Only whenの部分には[Button 隠れボタン is visible]と設定します。
次にClick here to add an action…を選択します。
そして[Elements Actions]→[Show GroupFocusA]を選択します。
次に2つ目のイベントを作ります。
先程と同様に[Do When Condition is True]を選択します。
そしてOnly whenの部分に[Button 隠れボタン isn’t visible]を入力します。
それからClick here to add an action…から[Elements Actions]→[Hide GroupFocusA]を選択します。
これで完成です。
しっかりできていれば以下のようなホバーアニメーションができているはずです。
これらの一連の操作によって、隠れボタンが表示されている時はGroupFocusを表示、隠れボタンが非表示の時はGroupFocusも非表示にすることができています。
あとがき
今回の記事をご覧いただきありがとうございました。
このアイデアを使いこなせば、ボタンがホバーされたときに他の要素をアニメーションさせることもできます。かなり応用できるテクニックなので、ぜひ他の場合にも使ってみてください。
ただし、ワークフローの数が多くなりがちなのでそこは注意してください。
今後もこのような面白いBubbleのテクニックをどんどんご紹介していきますので、他の記事もぜひご覧ください！
