懸停時顯示元素

當鼠標懸停在父元素上時,使用懸停互動來顯示子元素。

本文會提到:

  1. 建立一個懸停的動畫

  2. 建立一個懸停的動畫

  3. 將動畫應用於其他元素

建立一個懸停動畫

  1. 選擇連結塊(使其成為觸發器)

  2. 在互動面板上,點擊元素觸發器旁邊的加號,從下拉選單中選擇鼠標懸停

  3. 在懸停時,從動作選單中選擇啟動一個動畫

  4. 點擊時間動畫旁邊的加號

  5. 命名它(例如"Fly in")

  6. 選擇想做動畫的元素

  7. 點擊定時動作旁邊的加號,從下拉選單中選擇移動

  8. 在"Move"給X軸一個數值(例如,-100)

  9. 在"Timing"旁邊,將開關切換到設置為初始狀態

  10. 對於您想做動畫的其他元素,重複步驟6到9

  11. 互動面板,(點擊shift)並選擇時間軸上的元素

  12. 右鍵單擊以複製

  13. 在"Move"把X軸改回原點(0像素)

  14. 在"Timing"改變Easing(例如Ease Out)

  15. 縮短持續時間(例如縮短到0.2秒)

建立一個懸停的動畫

  1. 點擊離開您剛剛建立的動畫

  2. 在互動面板中,在懸停時,從動作選單中選擇開始一個動畫

  3. 在定時動畫下,點擊飛入旁邊的齒輪圖標並選擇複製

  4. 啟動飛入2

  5. 重新命名它

  6. 從時間軸上刪除重複的動畫

  7. 選擇時間線中的其餘動畫

  8. 在"Timing"旁邊關掉"Set as initial state"

  9. 調整緩和與持續時間

將動畫應用於其他元素

  1. 選擇時間線中的任何一個定時動作

  2. 在"Affect"旁邊選擇"Class"

  3. 點擊所有具有這個類別的元素,並選擇只有具有這個類別的子元素

  4. 重複1-3的懸停出入動作

Last updated