极客教程如何在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}",
],
}
项目结构
它将会如下所示。
安装软件包后的依赖关系列表：
{
"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/ 上可见的输出。
示例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;
运行应用程序的步骤：
npm start
输出: 此输出将在 http://localhost:3000/ 上可见。
