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

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

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

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

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

<div id="test-block" class="bg-yellow"> </div>

步驟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, 再點一次就變回粉紅色


點擊按鈕後改變複數物件:

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

<button on="tap:body.test-block('class' = 'bg-pink') , test-block2.toggleClass('class' = 'bg-pink'2')">點擊按鈕</button>

 

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

<button on="tap:test-block.toggleClass('class' = 'bg-pink', 'force' = true)">點擊按鈕</button>

使用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 id="test-block" class=" " [class]="magicBox[animateBox].className"> </div>

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

 

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

<span on="tap:test-block.toggleClass('class' = 'bg-pink')"
role="button" tabindex="0">點擊按鈕</span>


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

更多文章:

  1. AMP教學-amp-bind-產品輪播圖與規格互動
  2. AMP教學-amp-bind-產品規格製作教學
  3. 每個AMP頁面都必須有非AMP版本嗎?
  4. AMP教學-amp-bind 增加網頁互動
  5. AMP頁面只適合使用在靜態網站上面嗎?

回應