このレッスンでは
- 要素を表示するアニメーションを作成する
- 要素を消すアニメーションを作成する
- 2つ目のトリガー要素を追加し、クリックすると表示/非表示になるように設定する
について説明しています。
1. 要素を出現させる
- トリガーとなる要素を選択します（例：「表示」ボタン）。
- Interactionsパネルで、On Selected ElementメニューからMouse Click (Tap) を選択します。
- 「On 1st Click」から「Start an Animation」を選択します。
- Timed Actionsの隣にあるプラス記号をクリックします。
- アニメーションの名前を "表示" にします
- 表示させたい要素を選択します(これは、トリガーとは異なるはずです)
- Timed Actions "の隣にあるプラス記号をクリックし、"Hide/Show "を選択します。
- 目のアイコンをクリックし、「表示」を「なし」に設定します。
- 初期状態として[設定]の横のボックスをクリックします
- インタラクションパネルに表示されたまま、プラス記号をクリックして、2つ目のHide/ShowアクションをTimed Actionsの下に追加します。
- [Hide/Show]で、ディスプレイの設定を元の値（ここではブロック）に戻します。
2. ある要素を消す
- 前のステップと同じトリガー要素を選択します。
- 2回目のクリックで「アニメーションを開始」を選択します。
- タイムド・アクション(Timed Actions)の隣にあるプラス記号をクリックします。
- アニメーションの名前を "Hide "とします。
- 前のステップと同じ要素を選択し、消します。
- タイムド・アクションの隣にあるプラス記号をクリックし、「隠す／表示」を選択します。
- 目のアイコンをクリックし、表示を「なし」にします。
3. クリックすると表示/非表示になるように設定
- 元のトリガー要素（「歌詞表示」テキスト）をクリックし、複製します。
- 名前を変更する（例："Hide Lyrics"）
- アクションを作成し、その初期状態の表示を「なし」に設定します。
- 2つ目のアクションを追加し、表示設定を元の値 (例: Block) にします。
- "歌詞を表示" をクリックし、クリックすると非表示になるように、表示設定を "なし" に設定します。
- 歌詞を隠す" をクリックし、表示設定を「なし」にするアニメーションを追加します。
- "歌詞の表示" に戻り、2回目のクリックで再び表示されるようにアニメーションを追加します。
- クリック＆ドラッグで、タイムド・アクションのすべてが同時に起こるようにします（0秒）。