[筆記] React 隨手記 （按下按鈕切換兩個css動畫功能）

製作按下按鈕切換兩個css動畫功能

目的：
按下按鈕後
A動畫css功能 變成 B動畫css功能

說明：
動畫都已先寫好，兩個標籤都各有兩種特效
<Prize> 陰影的特效標籤css 含 A + B 兩種特效
<PokemonBall> 球的特效標籤css 含 A + B 兩種特效
<LotteryButton> 按鈕標籤

步驟1：
先到標籤自行用＄命名（標籤慣用法）
ps:如果這個屬性是要給css用的習慣用＄開頭命名
例如：$isDraw、＄isDone
isDraw再點選按鈕後，會是true
所以預設會先給它一個 false

<Contain>
  <Prize $isDraw={false}>
    <PokemonBall $isDraw={false} />
  </Prize>
</Contain>

步驟1：
分別到
<Prize> 代表陰影
<PokemonBall> 代表球
這兩個標籤做設定

先到標籤<PokemonBall>的css傳props進去，利用三元運算？：
填寫Ａ或Ｂ動畫

const PokemonBall = styled.div`
background: url('/pokemon_photo/pokemonball.svg');

//操作要點在這段
${(props) => //用props取得標籤屬性
props.$isDraw //用props.$isDraw取得$isDraw的變數
? 'animation: switch 3s;'
//問號左邊是表示true,所以當標籤那邊的$isDraw={true}會執行這行動畫
//注意css動畫程式碼要用字串“”刮起來
: 'animation: ball 1s infinite;' + 'animation-delay: 1.5s;'}
//問號右邊是表示false,,所以當標籤那邊的$isDraw={false}會執行這行動畫
//注意css動畫程式碼要用字串“”刮起來,在ES6裡，反斜線等同字串的意思，所以可以字串相加

@keyframes ball {
    0% {
      transform: translate(0, 5px);
    }
    50% {
      transform: translate(0, 30px);
    }
    100% {
      transform: translate(0, 5px);
    }
}
`

步驟1:
再到標籤<Prize>的css傳props進去，利用三元運算？：
填寫Ａ或Ｂ動畫

const Prize = styled.div`
&:after {
    position: relative;
    content: ' ';
    background: rgba(0, 58, 113, 0.5);

${(props) =>//用props取得標籤屬性
props.$isDraw//用props.$isDraw取得$isDraw的變數
? 'animation: switch-shadow 3s;'
//問號左邊是表示true,所以當標籤那邊的$isDraw={true}會執行這行動畫
//注意css動畫程式碼要用字串“”刮起來
: 'animation: shadow 1s infinite;' + 'animation-delay: 1.5s;'}
//問號右邊是表示false,,所以當標籤那邊的$isDraw={false}會執行這行動畫
//注意css動畫程式碼要用字串“”刮起來,在ES6裡，反斜線等同字串的意思，所以可以字串相加
`

步驟2:
完成步驟1後，記得測試動畫是否切換成功！
到標籤更改參數true或false測試動畫切換，如圖
把標籤裡的$isDraw={true}換成$isDraw={false}反覆測一下
看一下動畫是否切換成功

<Contain>
  <Prize $isDraw={true}>
    <PokemonBall $isDraw={true} />
  </Prize>
</Contain>

步驟3:
目的：把按鈕監聽事件加入，讓按下按鈕，畫面動畫會跟著切換
先到按鈕標籤加上onClick

<Lottery>
  <LotteryButton onClick={handleClickDraw}>
    <LotteryButtonContent>Lucky Draw</LotteryButtonContent>
  </LotteryButton>
</Lottery>

步驟4:
一旦發生onClick後
利用變更資料改變畫面

export default function App() {
  const [isDraw, setIsDraw] = useState(false);
  //先寫好制式化 isDraw 資料和改變方法

  //寫一個onclick 觸發的箭頭函示
  const handleClickDraw = () => {
    if (isDraw) {//避免使用者狂點，不斷發生點擊事件導致壞掉，讓$isDraw={true}的狀態時，就停止，不發生反應
      return;
    }
    setIsDraw(true);//一旦觸發onclick，將原本標籤$isDraw={false}預設的參數為false的動畫，切換成true的動畫
    setTimeout(() => {//設定一個內建函示計時器，等動畫三秒的執行時間結束，才切換成false的動畫。
    //如果沒設這個三秒，他會提早變成false的動畫，等於true的動畫動到一半會腰斬，變成false的動畫
    //這邊的時間設定要看動畫一開始css設定的時間長度為多少，再來調整，非固定制式時間
      setIsDraw(false);
    }, 3000);
  };

  return (
  ...
  )

步驟5:
完成步驟4之後
可以把標籤中的$isDraw={false}
其中的false都改成$isDraw={isDraw}
因為我們上面已經定義制式化 isDraw 資料和改變方法
引用進下面即可

<Contain>
  <Prize $isDraw={isDraw}>
    <PokemonBall $isDraw={isDraw} />
  </Prize>
</Contain>