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

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

在我为 TPAC 2022 准备的草案提案中，我演示了这个功能的编程模型可能是什么样的：

零开始，探索如何使用 TailwindCSS 自定义动画

Tailwind CSS是一种颠覆性的CSS框架，改变了开发者处理前端开发的方式。它的低级性和移动优先的方法使得它成为设计独特、响应式和可扩展的网页设计的热门选择。此外，它还具有强大的动画支持，使开发者能够构建引人入胜的用户体验，吸引访问者。

本文将详细介绍如何使用TailwindCSS进行动画设计。我们将逐步介绍框架提供的不同种类的动画，并提供步骤说明，帮助您将它们整合到应用程序中。本文将引导个人通过添加简单的悬停动画以及更复杂的动画来掌握必要的技能和专业知识，为您的网站创建引人入胜的动画效果。

建立开发环境

1、首先，我们应该在React应用程序中安装和设置TailwindCSS，具体步骤如下：通过运行以下命令并选择React作为框架来创建一个React应用程序：

npm init vite

2、接下来，使用以下命令安装TailwindCSS和其他依赖项，如postcss和autoprefixer：

npm install -D tailwindcss postcss autoprefixer

3、运行命令 "npx tailwindcss init -p" 来创建配置文件，并打开 tailwind.config.js 文件，将其内容替换为提供的代码片段。

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

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

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

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

现在我们可以在React应用程序中使用TailwindCSS了。

深入了解TailwindCSS动画，为现代网页设计增添视觉魅力

Tailwind CSS默认提供了四个动画属性，用于为您的网页添加一些视觉效果。这些动画旨在简单地集成到您的项目中，以改善用户体验。

在这里，我们将详细介绍每个动画，提供完整的示例，演示如何将它们整合到我们的网站设计中。

animate-spin

想要在您的网站上添加加载或旋转动画吗？只需包含 "animate-spin" 属性，动画将自动应用。让我们来看一个例子。

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" 属性，用于淡入淡出元素。这个属性特别适用于创建骨架加载器和其他类似的视觉效果。

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。这个属性创建了一个雷达信号或水波纹效果，非常适合通知徽章和其他类似的设计元素。

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;

运行后的效果如下：

这些是默认的动画，也可以应用于悬停或激活状态：

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

这些动画可以应用于响应式断点。

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

注：当屏幕宽度大于等于 md （medium）断点时，为按钮元素添加动画效果 animate-ping，以增强用户体验。同时，按钮上显示 "Processing..." 文字，表示正在处理中。

使用TailwindCSS创建自定义动画

TailwindCSS通过传递单个属性，提供了一个简单的方法来使用内置动画。但是，开发者也可以根据自己的要求创建自定义动画。

例如，您可以通过修改 "tailwind.config.css" 文件来设计独特的动画。这使开发者能够生成与其项目需求完全适配的动画。

在 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: [],
}

在这个例子中，它创建了一个名为 "button-rotate" 的自定义动画，包括一个无限循环、一个 "ease-in-out" 缓动函数和每个循环持续时间为两秒。

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;

运行后的效果如下：

利用任意值进行TailwindCSS动画

使用 TailwindCSS，开发者可以在框架内使用独特的 CSS 属性，这得益于一个称为 "任意值" 的功能。

通过在 TailwindCSS 类中添加方括号中的值，此功能使设计方面的调整如位置和填充变得更加灵活。

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

简而言之，TailwindCSS 中的任意值特性提供了灵活性和定制选择，快速生成具有美观效果的网页设计。

同样的，也可以用来创建自定义动画。

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]"，具有特定的设置。现在，让我们立即指定关键帧。

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: [],
}

这样做的结果将与我们在自定义动画部分指定的相同。

结束

当您掌握了 TailwindCSS 的动画功能后，您将可以通过使用内置动画属性或创建自定义动画来轻松地为网页增添视觉效果，从而提升用户体验。

通过在 TailwindCSS 类中使用任意值，您还可以调整设计方面的其他细节。这个特性提供了灵活性和个性化的选择，以便快速生成美观的网页设计。

希望您通过本文学习到如何使用 TailwindCSS 创建自定义动画，并能将这些知识应用到您的网页设计中。

在文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

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

作者：Nitin Sharma

非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正

辑导语：虽然国内软件的iPad用户占比不大，但依然存在着横屏适配的需求。本文作者讲述了自己做iPad横屏适配的背景，并对竞品的适配方式进行了分析研究，用自己的亲身经历提供了参考，推荐对ipad横屏适配感兴趣的童鞋阅读。

一、背景

在我参与的一款资料查询 App 中，对 iPad 只支持竖屏以手机 UI 尺寸拉伸，每个季度都有用户反馈希望适配 iPad 横屏。经过询问用户发现，因为 iPad mini 尺寸刚好可以放在工作服口袋中，随时拿出来使用，而 iPad 屏幕远比手机大，浏览资料视野更大更舒服。

但另外一方面，后台数据显示当前 iPad 用户占比只有 1%，用户呼声够不上星星之火，不足以燎原。先别谈说服团队做 iPad 横屏适配，连说服自己都难。本来以为这事就像水中投石，水波消散就没有下文了。直到有一天，同样是资深用户的高管自己拿着 iPad 装上我们的 App 用了几天，终于忍不了，开始推动 iPad 横屏适配。

二、参考

我们肯定不是第一个做 iPad 横屏适配的，但在网上搜了一圈，别说横屏适配，连 iPad 界面设计的文章都很少，下面 3 篇算不错的。这也是我决定写下本文的原因，为后来者提供经验，少踩坑。

1. 《利用好 iPad 的大屏幕 —— 如何为 iPadOS 14 设计 app？》，https://steppark.net/15942969497015.html
2. 《iPad 交互设计探索系列：iPad 适用产品篇》，https://www.jianshu.com/p/65211fddefb9
3. 《iPad 交互设计探索系列：iPad 导航设计篇》，https://www.jianshu.com/p/0c8e315d39d4

三、研究

没得经验参考就只能先从竞品分析开始了。经过对 iOS 系统应用、微信、QQ、微信阅读、得到、豆瓣、淘宝和有道词典的分析，我和同事总结成 5 种横屏适配模式。

1. 内容响应式

典型 App：iOS 应用商店

特征：标题栏和 Tabbar 通栏拉伸，内容区根据宽度向右响应式布局。

适用场景：全部场景。

评价：灵活性和用户体验都很好，但设计和开发成本很大。

2. 左右分栏

典型 App：iOS 设置、淘宝、微信、QQ

特征：左右分开显示，左边通常固定显示首页或者目录导航。右侧根据左侧选择显示对应的详情内容。

适用场景：频繁需要使用导航切换内容。

评价：用户体验适中，合理的利用横屏更大地展示更多的内容。设计成本小，需额外设计一个右侧默认为空的情况。开发成本要看是否改程序架构，相当于把手机两个手机界面合并成一个屏幕，可能有些程序架构很难这么修改。

3. 按竖屏宽度显示

典型 App：微信阅读

特征：标题栏和 Tabbar 通栏拉伸，内容直接按竖屏的宽度显示。

适用场景：全部场景。

评价：用户体验适中，设计与开发成本小，大多数产品采用此模式，但是没有更好的展现横屏宽屏的优势。

4. 全屏通栏拉伸

典型 App：豆瓣

特征：横屏为全屏通栏拉伸，所有元素与竖屏一致。

适用场景：全部场景。

评价：设计和开发成本最小，但是相当于没有适配。用户体验较差，横屏情况下内容集中，左侧右侧很空，或者被拉得很长，阅读体验较差。

5. 混合模式

当然也不是所有 App 都采用单一的模式。比如微信阅读，在其他页面是按竖屏宽度显示。但到了图书阅读界面，则是左右分栏充分利用 iPad 大屏幕展现内容。

以上竞品分析所有截图我们都保存在 Figma 中，有需要的读者可前往获取。

链接：https://www.figma.com/community/file/1071850659054902697/iPad-横屏适配竞品分析

四、执行

非常遗憾的是虽然高管牵头做适配，但开发资源确实有限。不能为了设计师邀功拿业绩就从头把 iOS App 重构一遍，因此我们决定用最少的资源做最核心的优化。

适配计划分为 2 期。第 1 期将所有页面用按竖屏宽度显示进行横屏适配。第 2 期挑选核心页面用内容响应式或左右分栏进行优化。

1. 先开发再验收

在第 1 期我们就踩坑了，按照原来的工作流程，我们将所有的 iPad 横屏页面做好线框图、再输出所有视觉效果图。虽然都是线上页面不用重新设计，只需要拉伸画面或者调整间距，但所有线上页面也是一个不小的工作量。

就在进行过程中，iOS 工程师就皱着眉头来提议，由于代码架构和资源所限，设计师如果调整的视觉效果图未必能 100% 实现。不如反过来，让他先把所有页面强行横屏，再由设计师走查发现问题进行修改，这样节省时间效果也可控。

可见，不同的项目类型可以采取不同的工作流程。iPad 横屏适配项目流程和常规工作流程刚好相反，以往是先设计再开发，改成先开发再走查，节省设计师产出效果图时间，也保障最终实现效果。

2. 核心场景决定核心页面

在第 2 期挑选核心页面时，我也犯了错误。最开始我觉得核心是脸面，因此挑选 Tabbar 导航的首页、个人中心等用户一打开 App 就看得到的页面进行优化。但实际上用户真正的核心使用场景是在详情页查阅资料，这才是真正的核心页面。

在得到主管纠正后，我们转而开始为资料阅读页面提供左内容右目录的布局，便于用户方便地在长文中精确定位想读的内容。

2 期计划并非适配的终结，随着 App 功能的迭代，此后老界面修改和新界面设计需要考虑到 iPad 横屏的适配问题，就成为了日常工作的内容了。

五、总结

按照以往的项目总结，最后应该汇报项目数据结果。但由于 iPad 用户本身可怜的占比，即使我们官方公众号推文宣布适配 iPad 横屏后，也没有 iPad 用户站出来点赞，而是又引发出使用华为、小米等安卓 Pad 的用户，要求也适配。

考虑到不同的安卓品牌适配方式不一样，而且安卓厂商自己又有平行世界等通用兼容方案，我们就没再继续参与了。

虽然没有外部用户反馈，但公司内部同事和开发团队使用后确实感觉很棒。所以我觉得这次适配项目真正值得思考的是：如果一个需求用户反馈很少，也没有数据支撑，但对体验影响很大，如何推动团队进行优化呢？

作者：龙爪槐守望者，微信公众号：龙爪槐守望者

本文由 @龙爪槐守望者 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议