const myRegistry = new CustomElementRegistry(); myRegistry.define("my-element", MyElement);

<button material-ripple>Click Me</button>

在我為 TPAC 2022 準(zhǔn)備的草案提案中，我演示了這個功能的編程模型可能是什么樣的：

零開始，探索如何使用 TailwindCSS 自定義動畫

Tailwind CSS是一種顛覆性的CSS框架，改變了開發(fā)者處理前端開發(fā)的方式。它的低級性和移動優(yōu)先的方法使得它成為設(shè)計獨特、響應(yīng)式和可擴(kuò)展的網(wǎng)頁設(shè)計的熱門選擇。此外，它還具有強(qiáng)大的動畫支持，使開發(fā)者能夠構(gòu)建引人入勝的用戶體驗，吸引訪問者。

本文將詳細(xì)介紹如何使用TailwindCSS進(jìn)行動畫設(shè)計。我們將逐步介紹框架提供的不同種類的動畫，并提供步驟說明，幫助您將它們整合到應(yīng)用程序中。本文將引導(dǎo)個人通過添加簡單的懸停動畫以及更復(fù)雜的動畫來掌握必要的技能和專業(yè)知識，為您的網(wǎng)站創(chuàng)建引人入勝的動畫效果。

建立開發(fā)環(huán)境

1、首先，我們應(yīng)該在React應(yīng)用程序中安裝和設(shè)置TailwindCSS，具體步驟如下：通過運行以下命令并選擇React作為框架來創(chuàng)建一個React應(yīng)用程序：

npm init vite

2、接下來，使用以下命令安裝TailwindCSS和其他依賴項，如postcss和autoprefixer：

npm install -D tailwindcss postcss autoprefixer

3、運行命令 "npx tailwindcss init -p" 來創(chuàng)建配置文件，并打開 tailwind.config.js 文件，將其內(nèi)容替換為提供的代碼片段。

/** @type {import('tailwindcss').Config} */

module.exports = {
content: [
   "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
   extend: {},
 },
 plugins: [],
}

最后，在 src/index.css 文件中粘貼以下代碼片段：

@tailwind base;
@tailwind components;
@tailwind utilities;

現(xiàn)在我們可以在React應(yīng)用程序中使用TailwindCSS了。

深入了解TailwindCSS動畫，為現(xiàn)代網(wǎng)頁設(shè)計增添視覺魅力

Tailwind CSS默認(rèn)提供了四個動畫屬性，用于為您的網(wǎng)頁添加一些視覺效果。這些動畫旨在簡單地集成到您的項目中，以改善用戶體驗。

在這里，我們將詳細(xì)介紹每個動畫，提供完整的示例，演示如何將它們整合到我們的網(wǎng)站設(shè)計中。

animate-spin

想要在您的網(wǎng)站上添加加載或旋轉(zhuǎn)動畫嗎？只需包含 "animate-spin" 屬性，動畫將自動應(yīng)用。讓我們來看一個例子。

import React from 'react';

function App() {
   return (
       <div className='w-screen h-screen flex justify-center items-center'>
           <button
               type="button"
               className="flex bg-red-500 text-white px-4 py-2 rounded-md"
           >
               <svg className="h-5 w-5 mr-3 animate-spin" viewBox="0 0 24 24">
                   <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                   <path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647zM12 20.735a8 8 0 008-8h4a12 12 0 01-12 12v-4.265zM20 12a8 8 0 01-8 8v4.265a12 12 0 0012-12h-4zm-8-6.735a8 8 0 018-8v-4.265a12 12 0 00-12 12h4z" />
               </svg>
               Processing...
           </button>
       </div >
   );
}


export default App;

運行后的效果如下：

animate-pulse

除了 "animate-spin" 屬性外，TailwindCSS 還提供了 "animate-pulse" 屬性，用于淡入淡出元素。這個屬性特別適用于創(chuàng)建骨架加載器和其他類似的視覺效果。

import React from 'react';

function App() {
   return (
       <div className='w-screen h-screen flex justify-center items-center'>
           <button
               type="button"
               className="flex bg-red-500 text-white px-4 py-2 rounded-md animate-pulse"
           >
               <svg className="h-5 w-5 mr-3 animate-spin" viewBox="0 0 24 24">
                   <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                   <path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647zM12 20.735a8 8 0 008-8h4a12 12 0 01-12 12v-4.265zM20 12a8 8 0 01-8 8v4.265a12 12 0 0012-12h-4zm-8-6.735a8 8 0 018-8v-4.265a12 12 0 00-12 12h4z" />
               </svg>
               Processing...
           </button>
       </div >
   );
}

export default App;

運行后的效果如下：

animate-bounce

要使元素上下彈跳，只需使用 animate-bounce。如果您想引起注意，這是很有用的。

import React from 'react';

function App() {
   return (
       <div className='w-screen h-screen flex justify-center items-center'>
           <button
               type="button"
               className="flex bg-red-500 text-white px-4 py-2 rounded-md animate-bounce">
               Processing...
           </button>
       </div >
   );
}

export default App;

運行后的效果如下：

animate-ping

最后一個TailwindCSS動畫屬性是 animate-ping。這個屬性創(chuàng)建了一個雷達(dá)信號或水波紋效果，非常適合通知徽章和其他類似的設(shè)計元素。

import React from 'react';

function App() {
   return (
       <div className='w-screen h-screen flex justify-center items-center'>
           <button
               type="button"
               className="flex bg-red-500 text-white px-4 py-2 rounded-md animate-ping"
           >
               Processing...
           </button>
       </div >
   );
}

export default App;

運行后的效果如下：

這些是默認(rèn)的動畫，也可以應(yīng)用于懸停或激活狀態(tài)：

<button type="button" className="hover:animate-ping"> Processing… </button>

這些動畫可以應(yīng)用于響應(yīng)式斷點。

<button className="md:animate-ping">Processing…</button>

注：當(dāng)屏幕寬度大于等于 md （medium）斷點時，為按鈕元素添加動畫效果 animate-ping，以增強(qiáng)用戶體驗。同時，按鈕上顯示 "Processing..." 文字，表示正在處理中。

使用TailwindCSS創(chuàng)建自定義動畫

TailwindCSS通過傳遞單個屬性，提供了一個簡單的方法來使用內(nèi)置動畫。但是，開發(fā)者也可以根據(jù)自己的要求創(chuàng)建自定義動畫。

例如，您可以通過修改 "tailwind.config.css" 文件來設(shè)計獨特的動畫。這使開發(fā)者能夠生成與其項目需求完全適配的動畫。

在 tailwind.config.js 文件中：

/** @type {import('tailwindcss').Config} */


module.exports = {
 content: [
   "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
   extend: {
     animation: {
       'button-rotate': 'button-rotate 2s ease-in-out infinite',
     },
     keyframes: {
       'button-rotate': {
         '0%': { transform: 'scale(1) rotate(0deg)' },
         '50%': { transform: 'scale(1.5) rotate(180deg)' },
         '100%': { transform: 'scale(1) rotate(360deg)' },
       },
     },
   },
 },
 plugins: [],
}

在這個例子中，它創(chuàng)建了一個名為 "button-rotate" 的自定義動畫，包括一個無限循環(huán)、一個 "ease-in-out" 緩動函數(shù)和每個循環(huán)持續(xù)時間為兩秒。

App.js

import './App.css';

function App() {
 return (
   <div class="flex justify-center items-center h-screen w-screen">
     <button class="animate-button-rotate bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
       Click Me
     </button>
   </div>
 )
}

export default App;

運行后的效果如下：

利用任意值進(jìn)行TailwindCSS動畫

使用 TailwindCSS，開發(fā)者可以在框架內(nèi)使用獨特的 CSS 屬性，這得益于一個稱為 "任意值" 的功能。

通過在 TailwindCSS 類中添加方括號中的值，此功能使設(shè)計方面的調(diào)整如位置和填充變得更加靈活。

例如，我們可以包括 padding-[5px]、bottom-[17px] 等屬性。

簡而言之，TailwindCSS 中的任意值特性提供了靈活性和定制選擇，快速生成具有美觀效果的網(wǎng)頁設(shè)計。

同樣的，也可以用來創(chuàng)建自定義動畫。

import React from ‘react’;

function App() {
 return (
   <div class="flex justify-center items-center h-screen w-screen">
     <button class="animate-[wiggle_1s_ease-in-out_infinite] bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
       Click Me
     </button>
   </div>
 );
}

export default App;

這里我們使用了 "animate-[wiggle_1s_ease-in-out_infinite]"，具有特定的設(shè)置。現(xiàn)在，讓我們立即指定關(guān)鍵幀。

tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
 content: [
   "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
   extend: {
     keyframes: {
       'wiggle': {
         '0%': { transform: 'scale(1) rotate(0deg)' },
         '50%': { transform: 'scale(1.5) rotate(180deg)' },
         '100%': { transform: 'scale(1) rotate(360deg)' },
       },
     },
   },
 },
 plugins: [],
}

這樣做的結(jié)果將與我們在自定義動畫部分指定的相同。

結(jié)束

當(dāng)您掌握了 TailwindCSS 的動畫功能后，您將可以通過使用內(nèi)置動畫屬性或創(chuàng)建自定義動畫來輕松地為網(wǎng)頁增添視覺效果，從而提升用戶體驗。

通過在 TailwindCSS 類中使用任意值，您還可以調(diào)整設(shè)計方面的其他細(xì)節(jié)。這個特性提供了靈活性和個性化的選擇，以便快速生成美觀的網(wǎng)頁設(shè)計。

希望您通過本文學(xué)習(xí)到如何使用 TailwindCSS 創(chuàng)建自定義動畫，并能將這些知識應(yīng)用到您的網(wǎng)頁設(shè)計中。

在文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請別忘了點贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時，如果您想獲取更多前端技術(shù)的知識，歡迎關(guān)注我，您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容，敬請期待。

原文：https://levelup.gitconnected.com/customizing-tailwind-css-animations-advancing-your-web-design-skills-dc9667494993

作者：Nitin Sharma

非直接翻譯，有自行改編和添加部分，翻譯水平有限，難免有疏漏，歡迎指正

輯導(dǎo)語：雖然國內(nèi)軟件的iPad用戶占比不大，但依然存在著橫屏適配的需求。本文作者講述了自己做iPad橫屏適配的背景，并對競品的適配方式進(jìn)行了分析研究，用自己的親身經(jīng)歷提供了參考，推薦對ipad橫屏適配感興趣的童鞋閱讀。

一、背景

在我參與的一款資料查詢 App 中，對 iPad 只支持豎屏以手機(jī) UI 尺寸拉伸，每個季度都有用戶反饋希望適配 iPad 橫屏。經(jīng)過詢問用戶發(fā)現(xiàn)，因為 iPad mini 尺寸剛好可以放在工作服口袋中，隨時拿出來使用，而 iPad 屏幕遠(yuǎn)比手機(jī)大，瀏覽資料視野更大更舒服。

但另外一方面，后臺數(shù)據(jù)顯示當(dāng)前 iPad 用戶占比只有 1%，用戶呼聲夠不上星星之火，不足以燎原。先別談?wù)f服團(tuán)隊做 iPad 橫屏適配，連說服自己都難。本來以為這事就像水中投石，水波消散就沒有下文了。直到有一天，同樣是資深用戶的高管自己拿著 iPad 裝上我們的 App 用了幾天，終于忍不了，開始推動 iPad 橫屏適配。

二、參考

我們肯定不是第一個做 iPad 橫屏適配的，但在網(wǎng)上搜了一圈，別說橫屏適配，連 iPad 界面設(shè)計的文章都很少，下面 3 篇算不錯的。這也是我決定寫下本文的原因，為后來者提供經(jīng)驗，少踩坑。

1. 《利用好 iPad 的大屏幕 —— 如何為 iPadOS 14 設(shè)計 app？》，https://steppark.net/15942969497015.html
2. 《iPad 交互設(shè)計探索系列：iPad 適用產(chǎn)品篇》，https://www.jianshu.com/p/65211fddefb9
3. 《iPad 交互設(shè)計探索系列：iPad 導(dǎo)航設(shè)計篇》，https://www.jianshu.com/p/0c8e315d39d4

三、研究

沒得經(jīng)驗參考就只能先從競品分析開始了。經(jīng)過對 iOS 系統(tǒng)應(yīng)用、微信、QQ、微信閱讀、得到、豆瓣、淘寶和有道詞典的分析，我和同事總結(jié)成 5 種橫屏適配模式。

1. 內(nèi)容響應(yīng)式

典型 App：iOS 應(yīng)用商店

特征：標(biāo)題欄和 Tabbar 通欄拉伸，內(nèi)容區(qū)根據(jù)寬度向右響應(yīng)式布局。

適用場景：全部場景。

評價：靈活性和用戶體驗都很好，但設(shè)計和開發(fā)成本很大。

2. 左右分欄

典型 App：iOS 設(shè)置、淘寶、微信、QQ

特征：左右分開顯示，左邊通常固定顯示首頁或者目錄導(dǎo)航。右側(cè)根據(jù)左側(cè)選擇顯示對應(yīng)的詳情內(nèi)容。

適用場景：頻繁需要使用導(dǎo)航切換內(nèi)容。

評價：用戶體驗適中，合理的利用橫屏更大地展示更多的內(nèi)容。設(shè)計成本小，需額外設(shè)計一個右側(cè)默認(rèn)為空的情況。開發(fā)成本要看是否改程序架構(gòu)，相當(dāng)于把手機(jī)兩個手機(jī)界面合并成一個屏幕，可能有些程序架構(gòu)很難這么修改。

3. 按豎屏寬度顯示

典型 App：微信閱讀

特征：標(biāo)題欄和 Tabbar 通欄拉伸，內(nèi)容直接按豎屏的寬度顯示。

適用場景：全部場景。

評價：用戶體驗適中，設(shè)計與開發(fā)成本小，大多數(shù)產(chǎn)品采用此模式，但是沒有更好的展現(xiàn)橫屏寬屏的優(yōu)勢。

4. 全屏通欄拉伸

典型 App：豆瓣

特征：橫屏為全屏通欄拉伸，所有元素與豎屏一致。

適用場景：全部場景。

評價：設(shè)計和開發(fā)成本最小，但是相當(dāng)于沒有適配。用戶體驗較差，橫屏情況下內(nèi)容集中，左側(cè)右側(cè)很空，或者被拉得很長，閱讀體驗較差。

5. 混合模式

當(dāng)然也不是所有 App 都采用單一的模式。比如微信閱讀，在其他頁面是按豎屏寬度顯示。但到了圖書閱讀界面，則是左右分欄充分利用 iPad 大屏幕展現(xiàn)內(nèi)容。

以上競品分析所有截圖我們都保存在 Figma 中，有需要的讀者可前往獲取。

鏈接：https://www.figma.com/community/file/1071850659054902697/iPad-橫屏適配競品分析

四、執(zhí)行

非常遺憾的是雖然高管牽頭做適配，但開發(fā)資源確實有限。不能為了設(shè)計師邀功拿業(yè)績就從頭把 iOS App 重構(gòu)一遍，因此我們決定用最少的資源做最核心的優(yōu)化。

適配計劃分為 2 期。第 1 期將所有頁面用按豎屏寬度顯示進(jìn)行橫屏適配。第 2 期挑選核心頁面用內(nèi)容響應(yīng)式或左右分欄進(jìn)行優(yōu)化。

1. 先開發(fā)再驗收

在第 1 期我們就踩坑了，按照原來的工作流程，我們將所有的 iPad 橫屏頁面做好線框圖、再輸出所有視覺效果圖。雖然都是線上頁面不用重新設(shè)計，只需要拉伸畫面或者調(diào)整間距，但所有線上頁面也是一個不小的工作量。

就在進(jìn)行過程中，iOS 工程師就皺著眉頭來提議，由于代碼架構(gòu)和資源所限，設(shè)計師如果調(diào)整的視覺效果圖未必能 100% 實現(xiàn)。不如反過來，讓他先把所有頁面強(qiáng)行橫屏，再由設(shè)計師走查發(fā)現(xiàn)問題進(jìn)行修改，這樣節(jié)省時間效果也可控。

可見，不同的項目類型可以采取不同的工作流程。iPad 橫屏適配項目流程和常規(guī)工作流程剛好相反，以往是先設(shè)計再開發(fā)，改成先開發(fā)再走查，節(jié)省設(shè)計師產(chǎn)出效果圖時間，也保障最終實現(xiàn)效果。

2. 核心場景決定核心頁面

在第 2 期挑選核心頁面時，我也犯了錯誤。最開始我覺得核心是臉面，因此挑選 Tabbar 導(dǎo)航的首頁、個人中心等用戶一打開 App 就看得到的頁面進(jìn)行優(yōu)化。但實際上用戶真正的核心使用場景是在詳情頁查閱資料，這才是真正的核心頁面。

在得到主管糾正后，我們轉(zhuǎn)而開始為資料閱讀頁面提供左內(nèi)容右目錄的布局，便于用戶方便地在長文中精確定位想讀的內(nèi)容。

2 期計劃并非適配的終結(jié)，隨著 App 功能的迭代，此后老界面修改和新界面設(shè)計需要考慮到 iPad 橫屏的適配問題，就成為了日常工作的內(nèi)容了。

五、總結(jié)

按照以往的項目總結(jié)，最后應(yīng)該匯報項目數(shù)據(jù)結(jié)果。但由于 iPad 用戶本身可憐的占比，即使我們官方公眾號推文宣布適配 iPad 橫屏后，也沒有 iPad 用戶站出來點贊，而是又引發(fā)出使用華為、小米等安卓 Pad 的用戶，要求也適配。

考慮到不同的安卓品牌適配方式不一樣，而且安卓廠商自己又有平行世界等通用兼容方案，我們就沒再繼續(xù)參與了。

雖然沒有外部用戶反饋，但公司內(nèi)部同事和開發(fā)團(tuán)隊使用后確實感覺很棒。所以我覺得這次適配項目真正值得思考的是：如果一個需求用戶反饋很少，也沒有數(shù)據(jù)支撐，但對體驗影響很大，如何推動團(tuán)隊進(jìn)行優(yōu)化呢？

作者：龍爪槐守望者，微信公眾號：龍爪槐守望者

本文由 @龍爪槐守望者 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議