Vue3 + Animate.css 实现鼠标Hover动画

1. 使用npm安装Animate.css

npm install animate.css --save

2. 在Vue3的入口文件main.ts 中引入Aminate.css

建议通过这种方式全局引入

import "animate.css/animate.min.css";

3. 使用

Animate.css动画的使用原理是当界面从无到有的显示时，会通过Animate.css中定义的class来进行相应的动画展示

使用方式1: 通过隐显元素来触发（必须要先有animate__animated类，然后添加一个相应动画的类，具体的类名和动画效果可以通过http://www.animate.net.cn/来查看类名和动画效果演示）

3.1: transition动画

<transition
    appear
    name="animate__animated animate__bounce"
    enter-active-class="animate__backInLeft"
    leave-active-class="animate__backOutRight"
>
  <h2>Animate.css</h2>
</transition>

3.2: transition-group动画组

<transition-group
    appear
    name="animate__animated animate__bounce"
    enter-active-class="animate__backInLeft"
    leave-active-class="animate__backOutRight"
>
  <h2 v-show="state.showAnimate" key="one">Animate.css</h2>
  <h2 v-show="!state.showAnimate" key="two">Animate.css</h2>
</transition-group>
<el-button @click="state.showAnimate = !state.showAnimate">
  切换动画
</el-button>

3.3: 通过动态class来触发

html部分：

<transition-group 
  enter-active-class="animate__animated animate__backInLeft"
  leave-active-class="animate__animated animate__backInRight"
>
  <div v-for="(item, index) in state.menuList" :key="index" class="card-item">
    <transition>
      <el-image 
        :class="showAnimate(item.show, index)"
        @mouseenter="item.show = true" 
        @mouseleave="item.show = false"
        :src="require(`./assets/img/${ imageList[index % 7] }.png`)"
        fit="contain" 
        @click="onItemClick(item)"
      />
    </transition>
    <div class="topic">{{ item.name }}</div>
  </div>
</transition-group>

 JS部分

const imageList = ['icon-service', 'icon-chrome', 'icon-linux', 'icon-windows', 'icon-pc', 'icon-red', 'icon-blue'];

const state = reactive({
  menuList: [
      { name: "医保支付平台" },
      { name: "医院信息管理" },
      { name: "医疗知识库" },
      { name: "医疗数据中台" },
      { name: "指标服务中心" },
      { name: "质控服务平台" },
      { name: "特征平台" },
      { name: "系统管理" },
  ]
})

const showAnimate = (isShow: boolean, index: number) => {
  return isShow ? `animate__animated ${ iconClassList[index % iconClassList.length] } big-icon` : '';
}

 注意： 图片地址根据自己的实际存放地址进行相应修改即可

 css部分

.big-icon {
  width: 200px !important;
}
.el-image {
  width: 150px;
  height: 150px;
  cursor: pointer;
}
.card-item {
  min-width: 150px;
  border-radius: 15px;
  padding: 15px 25px;
  margin: 10px 20px;
  display: flex;
  flex: 1;
  //cursor: pointer;
  flex-direction: column;
  align-items: center;
  //box-shadow: 0px 0px 3px 3px rgb(0 0 0 / 4%), 0px 0px 20px rgb(0 0 0 / 4%);
  .topic {
    display: flex;
    //margin-top: 10px;
    font-size: 20px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
  }
}