如何在React中使用Tailwind CSS添加悬停时的比例动画

在本文中，我们将看到如何在ReactJS应用程序中使用tailwind CSS添加鼠标悬停时的比例动画。悬停效果是当用户将光标放在元素上方时出现的。在tailwind CSS中，比例实用类可以帮助实现元素的缩放效果。

先决条件

React JS
Tailwind CSS

添加比例动画的方法

要在React中使用tailwind CSS添加悬停时的比例动画，我们将使用Tailwind CSS提供的比例和动画类，如下所示：

在Tailwind CSS中使用的比例动画类

Tailwind CSS比例： 该类用于悬停时在元素上应用包含值（y）的变换。
Tailwind CSS变换： 该类用于对元素进行变换。
Tailwind CSS过渡属性： 该类用于控制过渡。
Tailwind CSS过渡持续时间： 该类用于控制CSS过渡的持续时间，其值范围从75到1000。

语法：

<div class="overflow-hidden">  
    <img src="gfg.png" class=" **hover:scale-x transform transition duration-y** " />  
</div>

创建React应用的步骤

步骤1： 使用以下命令创建React应用：

npm create-react-app appname

步骤2： 创建您的项目文件夹(即文件夹名称)后，使用以下命令切换到它：

cd foldername

步骤3： 在创建React.js应用之后，使用以下命令安装Tailwind CSS。

npm i -D tailwindcss postcss autoprefixer  
npx tailwindcss init -p

步骤4: 将Tailwind CSS指令添加到项目的 index.css 文件中。

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

步骤5 ：使用以下命令在 tailwind.config.js 文件中配置模板路径：

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

项目结构

它将会如下所示。

如何在React中使用Tailwind CSS添加悬停时的比例动画

安装软件包后的依赖关系列表：

{  
    "dependencies": {  
        "@testing-library/jest-dom": "^5.17.0",  
        "@testing-library/react": "^13.4.0",  
        "@testing-library/user-event": "^13.5.0",  
        "react": "^18.2.0",  
        "react-dom": "^18.2.0",  
        "react-router": "^6.17.0",  
        "react-scripts": "5.0.1",  
        "web-vitals": "^2.1.4"  
    },  
    "devDependencies": {  
        "autoprefixer": "^10.4.16",  
        "postcss": "^8.4.31",  
        "tailwindcss": "^3.3.3"  
    }  
}

示例1： 下面的示例演示了如何在React.js中使用Tailwind CSS对

div>元素进行悬停缩放。我们开发了一个基本的卡片组件，当用户将鼠标悬停在卡片上时，卡片会被缩放到110的大小。

import React from "react";
 
function App() {
    return (
        <center>
              <div>
                <h1 class="text-green-600 
                           text-3xl font-bold">
                    GeeksforGeeks
                </h1>
                <h3 class="text-xl text-black">
                      Scale Animation on Hover 
                      using Tailwind CSS
                </h3>
              </div>
              <div>
                  <div class="p-4 md:w-1/4 sm:w-1/2 w-full">
                    <div class="border-2 border-green-600 
                                cursor-pointer py-6 rounded-lg 
                                transform transition duration-500 
                                hover:scale-110">
                          <h2 class="title-font font-medium 
                                           text-3xl text-gray-900">
                                GeeksforGeeks
                          </h2>
                      <p class="text-xl">Premium</p>
                    </div>
                  </div>
              </div>
    </center>
  );
}
export default App;

运行应用程序的步骤：

npm start

输出： 在 http://localhost:3000/ 上可见的输出。

如何在React中使用Tailwind CSS添加悬停时的比例动画

示例2： 以下示例演示了在React.js中使用Tailwind CSS悬停时对图像进行缩放。我们在图像组件上添加了缩放动画，当用户悬停在上面时，图像会缩放至大小为125，并隐藏图像的溢出部分。

// Filename - App.js
 
import React from "react";
 
function App() {
    return (
        <center>
            <div>
                <h1 class="text-green-600 
                           text-3xl font-bold">
                    GeeksforGeeks
                </h1>
                <h3 class="text-xl text-black">
                    Scale Animation on Hover using 
                    Tailwind CSS
                </h3>
            </div>
            <div>
                <div className="bg-white overflow-hidden 
                                drop-shadow-md w-96 h-72 
                                rounded-md items-center 
                                justify-center">
                    <div className="w-full bg-cover overflow-hidden">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
                             className="w-full h-56 transform 
                                        transition duration-1000 
                                        hover:scale-125" />
                    </div>
                    <div class="flex mt-4 justify-between px-4">
                    <h3 className="font-bold text-xl">
                        GeeksforGeeks
                    </h3>
                    <a
                        href="https://geeksforgeeks.org"
                        class="items-center py-2 
                               px-4 text-sm font-medium 
                               text-center text-gray-900 
                               bg-white rounded-lg border 
                               border-green-500 hover:bg-green-500"
                    >
                        Visit
                    </a>
                    </div>
                </div>
            </div>
        </center>
      );
  }
 
export default App;