在AMP中添加或刪除class的方式

BY kate │ 2019-11-13 20:00:13

平常可以使用jQuery來增減class, 可能我們會使用像是toggleclass 的方式判斷class，網頁中常會用在狀態變更、顯示與隱藏、跳出視窗等效果，而在amp中要實現這點，則是要用 on 來監控並加入class。

點擊按鈕後，利用class要把區塊從黃色變成粉紅色

步驟1：被變動的物件需要下個ID,例如 div寫個id，並且我們增加個黃色底色
*不命名id就無法操作，一定要命名

步驟2：準備好css

#test-block{
width:100px;
height:100px;
}
.bg-yellow{
background:yellow;
}

.bg-pink{
background:pink;
}

步驟3：設定一個按鈕準備要來改變該div，監控id="test-block"物件。
toggleClass是指判斷有無bg-pink這個class，沒有的話就加入，有的話就把bg-pink拿掉。

<button on="tap:test-block.toggleClass('class' = 'bg-pink')">點擊按鈕-換背景顏色</button>

測試看看，當點擊按鈕時該div會從黃色變成粉紅色，再點一次則會變回黃色
如果從原始碼來看，可以發現點擊後增加了class bg-pink, 再點一次就變回粉紅色

點擊按鈕後改變複數物件:
假如點擊按鈕後有複數以上的物件需要變更，可以加入逗號寫成

只要單一刪除或增加class
如果想要有明確指示增加或刪除的話，可以使用 force，true代表增加， false代表刪除，一旦加上後再點第二次就不會再執行增減的效果。
可以想成類似jQuery的 addClass 和 removeClass

使用amp-bind準備多種class替換
如果想要操作特定物件有多種class變換，可以使用amp-bind來設定多種，不使用toggleClass，而是改用[class]
關於amp-bind可以參考之前的文章介紹。

步驟1: 首先寫好要替換的css們

.visible {
opacity: 1;
}
.invisible {
opacity: 0;
}
.left {
transform: translatex(50px)
}
.right {
transform: translatex(-50px)
}

步驟2: 寫好amp-bind 的json

<amp-state id="magicBox">
<script type="application/json">
{
"visibleBox": {
"className": "visible"
},
"invisibleBox": {
"className": "invisible"
},
"moveLeft": {
"className": "left"
},
"moveRight": {
"className": "right"
}
}
</script></amp-state>

步驟3: 準備好點擊後觸發效果的按鈕們

<button on="tap:AMP.setState({animateBox: 'invisibleBox'})">
Disappear
</button><button on="tap:AMP.setState({animateBox: 'visibleBox'})">
Reappear
</button><button on="tap:AMP.setState({animateBox: 'moveLeft'})">
Move Left
</button><button on="tap:AMP.setState({animateBox: 'moveRight'})">
Move Right
</button>

步驟4: 最後在打算要改變的div上面加入判斷 [class]="magicBox[animateBox].className"
animateBox是自訂義的變數，一定要有這個變數才會有作用

測試看看，點各個按鈕後div會有不同的變化

※另外，如果不是使用button，而是想要在<span>或<div>裡面使用的話，必須要加入role和 tabindex屬性，否則會出錯

參考網頁:
Class增加刪減 (日文)
官方文件