📅 最后修改于: 2023-12-03 14:50:16.867000 🧑 作者: Mango
本文将向初学者介绍如何在 TypeScript 中使用 CSS 动画。CSS 动画是一种在网页上创建动态效果的方法，可以通过改变元素的样式属性来实现。TypeScript 是一种强类型的 JavaScript 扩展，可帮助开发者进行更高效的静态类型检查。
在开始之前，我们需要确保安装了 TypeScript。可以通过以下命令在全局安装 TypeScript：
npm install -g typescript
首先，我们需要创建一个新的 TypeScript 项目。在命令行中，使用以下命令创建一个新的文件夹并切换到该文件夹：
mkdir css-animation-typescript
cd css-animation-typescript
然后，在项目目录中，运行以下命令将 TypeScript 初始化到项目中：
tsc --init
此命令将在项目根目录创建一个 tsconfig.json 文件，用于配置 TypeScript 编译器的选项。
接下来，我们需要创建一个 HTML 文件来展示 CSS 动画。在项目根目录下，创建一个新的文件 index.html，并在其中添加以下内容：
<!DOCTYPE html>
<html>
<head>
<title>CSS Animation with TypeScript</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: my-animation 2s infinite;
}
@keyframes my-animation {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
上述 HTML 代码中，我们定义了一个名为 .box 的 CSS 类，用于创建一个红色的正方形。我们还定义了一个名为 my-animation 的 CSS 动画，该动画在 2 秒内将 .box 元素沿着 x 轴平移 200px。
接下来，我们将创建一个 TypeScript 文件 main.ts 来初始化我们的项目。在项目根目录下，创建一个名为 main.ts 的文件，并添加以下内容：
// 获取 .box 元素
const boxElement = document.querySelector('.box');
// 当元素被点击时执行动画
boxElement.addEventListener('click', () => {
boxElement.classList.add('animated');
});
上述 TypeScript 代码中，我们使用 document.querySelector 方法获取了 HTML 中的 .box 元素，并添加了一个点击事件监听器。当 .box 元素被点击时，我们将给它添加一个名为 animated 的 CSS 类，该类包含我们之前定义的动画。
在完成以上步骤后，我们需要通过 TypeScript 编译器将 TypeScript 代码编译为 JavaScript 代码。打开命令行，并在项目根目录中运行以下命令：
tsc main.ts
此命令将在项目目录中生成一个新的 .js 文件，其中包含编译后的 JavaScript 代码。
最后，我们将在浏览器中打开 index.html 文件以查看我们的动画效果。双击打开 index.html 文件或在命令行中运行以下命令来在默认浏览器中打开它：
open index.html
现在，当我们点击红色正方形时，该元素将执行我们定义的 CSS 动画。
通过本文，我们学习了如何在 TypeScript 中使用 CSS 动画。我们首先创建了一个 HTML 文件，在其中定义了我们的动画效果。然后，我们使用 TypeScript 编写了一个脚本文件来初始化和控制动画。最后，我们通过将 TypeScript 代码编译为 JavaScript 代码，并在浏览器中查看结果，成功地将动画应用到网页上。
希望本文对初学者能提供有关在 TypeScript 中使用 CSS 动画的基础知识和指导。