一、在项目中集成 Animate.css 动画
1. 集成 Animate.css
以 web-company 为例，步骤如下：
（1）安装 animate.css
在 web-company 目录下运行：
npm install animate.css
（2）在入口文件引入 animate.css
在 web-company/src/main.ts 添加：
import 'animate.css';
（3）在页面或组件中使用动画类
比如在 src/views/Home.vue 或 src/components/Navbar.vue：
<template>
<h1 class="animate__animated animate__fadeInDown">欢迎来到公司主页</h1>
</template>
你可以将 animate__animated 和具体动画类（如 animate__fadeInDown）加到任何元素上，实现入场、离场等动画效果。
二、问题
1. 问：你在项目中是如何集成 Animate.css 的？为什么选择它？
答：
在本项目（如 web-company），我通过 npm 安装了 animate.css，并在入口文件 main.ts 全局引入。这样所有组件都能直接使用其动画类。选择 animate.css 是因为它轻量、易用、动画丰富，能快速提升页面的动效体验，无需手写复杂的 CSS 动画。
2. 问：你在项目中哪些场景用到了 Animate.css？具体实现方式是什么？
答：
我在首页标题、导航栏、弹窗等场景使用了 Animate.css。例如首页标题 <h1> 使用了 animate__fadeInDown，让页面加载时有平滑的入场动画。实现方式是在元素上添加 animate__animated 和对应动画类名即可。
3. 问：如何在 Vue 组件中实现动画的按需触发？项目中有用到吗？
答：
在 Vue 组件中，可以通过绑定 class 或 v-if/v-show 控制动画的触发。例如在弹窗组件中，只有在弹窗显示时才添加动画类，实现入场动画。项目中我在弹窗和消息提示组件里用到了这种按需触发动画的方式，提升了交互体验。
4. 问：Animate.css 动画和 Vue 的 transition 组件如何配合使用？项目中有实践吗？
答：
可以用 Vue 的 <transition> 组件包裹需要动画的元素，并在 enter/leave 钩子里添加/移除 animate.css 的类。这样可以结合 Vue 的生命周期和 animate.css 的动画效果。项目中在弹窗组件的显示/隐藏时，我用 <transition> 配合 animate.css 实现了更流畅的动画。
5. 问：Animate.css 动画对性能有影响吗？你在项目中如何优化？
答：
Animate.css 动画本质是 CSS3 动画，对性能影响较小。但如果页面上动画元素过多，可能会导致重绘卡顿。项目中我只在关键元素（如首页标题、弹窗）使用动画，避免全局滥用，并通过按需加载和合理的动画时长设置，保证了页面的流畅性和性能。
