使用Animate鼠标悬浮时展示动画

案例：

调用Animate.css动画库实现鼠标悬浮时展示动画，而不是直接进行动画；

代码：

@click="partnersJump(list.pictureUrl)：实现点击图片跳转到链接地址list.url；
@mouseover="hoverImage(true, index)"与@mouseout=“hoverImage(false, index)”：当鼠标移动到图片上时与当鼠标离开图片时，通过设置isHovered[index]为true或false来动态添加或移除 CSS 类名animate__animated animate__headShake，就是通过true或false来控制给当前图片加动画；
:class=“{ ‘animate__animated animate__headShake’: isHovered[index] }”：初始化isHovered: []，将它设为与 partnersList 长度相同的数组，用于跟踪哪个图片被悬浮；
:title=“list.title”:鼠标悬停在当前图片上时有提示显示；

<swiper-slide class="partners-slide" v-for="(list, index) in partnersList" :key="index">
	<img v-if="list.url"
     	:src="'/api/'+list.url"
     	class="partners-img"
     	@click="partnersJump(list.pictureUrl)"
    	@mouseover="hoverImage(true, index)"
     	@mouseout="hoverImage(false, index)"
     	:class="{ 'animate__animated animate__headShake': isHovered[index] }"
     	:title="list.title">
</swiper-slide>

    partnersJump(url){
      window.open(url,'_blank');
    },
    hoverImage(isHovered, index) {
      this.isHovered[index] = isHovered;
    },