iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 2
2
自我挑戰組

愛寫什麼就寫什麼,開心最重要系列 第 2

Day2-Alpine.js進場出場簡易動畫

首先把下面這段程式碼丟到html裡面吧~

<div x-data="{ open: false }">
    <button @click="open = true">我是按鈕</button>
    
    <ul
        x-show="open"
        @click.away="open = false"
    >
        內容內容內容
    </ul>
</div>

最外面的div裡面x-data="{open:false}" 是必須要加的,
它會影響到內層的操作喔!
open是自己定義的名稱,預設是false;
button按鈕有click事件,意思是按下後open就會變成true;
ul裡面有x-show="open",x-show顧名思義就是顯示出來,意思是後面的open若是true就會show了;
另外 @click.away="open = false" 特別要提click後的.away,
官方是寫

當 .away 修飾器存在時,事件處理程序只有在事件的起源為非其自身或其子項時才會被執行。
當使用者點擊下拉式選單與互動式視窗時,這對於隱藏它們是非常有用的。
總之就是如果不加,就只能執行一次而已喔。

這樣簡單的顯示影藏就完成啦~

動畫x-show.transition

通常顯示影藏都會搭配一些動畫才不會這麼暴力啦~
那麼以下這些語法大家就可以試著玩玩看了,
就把標籤裡的x-show改成下面的整另就可以做變化和客製化了。

指令 功能描述
x-show.transition
-同步淡出與縮放 (opacity, scale: 0.95, timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), duration-in: 150ms, duration-out: 75ms)
x-show.transition.in
-只有「in」轉場。
x-show.transition.out
-只有「out」轉場。
x-show.transition.opacity
-只使用淡出。
x-show.transition.scale
-只使用縮放。
x-show.transition.scale.75
-自定 CSS 縮放transform: scale(.75) 。
x-show.transition.duration.200ms
-將「in」轉場設定為 200毫秒。「out」將設定為 in 的一半(100 毫秒)。
x-show.transition.origin.top.right
-自訂 CSS 轉場起始點transform-origin: top right.
x-show.transition.in.duration.200ms.out.duration.50ms
-替「in」與「out」設定不同的持續時間。

當然這些語法可以相互合併配合使用,就把它調成自己喜歡的樣子吧!

備註:x-show 將等待任何子轉場完成,如果你想繞過這個行為,請添加 .immediate 修飾器:

<div x-show.immediate="open">
    <div x-show.transition="open">
</div>

上一篇
DAY1-Alpine.js之一步一腳印
下一篇
Day3-Alpine.js簡易tab切換
系列文
愛寫什麼就寫什麼,開心最重要30

尚未有邦友留言

立即登入留言