vue3 动画实例实现鼠标移入放大移出缩小效果

一、推荐一个不错的开源动画插件：Animate.css

1、动画官网 Animate.css | A cross-browser library of CSS animations.

2、浏览器打开cdn地址可查看全部源码 ctrl+f 搜索自己想要的动画名称即可查看对应源码cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css

3、封装示例——动画组件源码

<template>
  <div
    :class="[
      enterShow ? 'animate__pulse__diy' : '',
      leaveShow ? 'animate__subse__diy' : '',
      'boxplus'
    ]"
    @mouseenter="onMouseenter"
    @mouseleave="onMouseleave"
  >
    <slot></slot>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const enterShow = ref(false)
    const leaveShow = ref(false)
    const onMouseenter = () => {
      enterShow.value = true
      leaveShow.value = false
    }
    const onMouseleave = () => {
      enterShow.value = false
      leaveShow.value = true
    }
    return {
      enterShow,
      leaveShow,
      onMouseenter,
      onMouseleave
    }
  }
}
</script>
<style lang="scss" scoped>
@-webkit-keyframes pulses {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  to {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
}
@keyframes pulses {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  to {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
}
@-webkit-keyframes subses {
  from {
    -webkit-transform: scale3d(105%, 105%, 105%);
    transform: scale3d(105%, 105%, 105%);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes subses {
  from {
    -webkit-transform: scale3d(105%, 105%, 105%);
    transform: scale3d(105%, 105%, 105%);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__pulse__diy {
  -webkit-animation-name: pulses;
  animation-name: pulses;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation: pulses 1s;
  animation-fill-mode: both;
}
.animate__subse__diy {
  -webkit-animation-name: subses;
  animation-name: subses;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation: subses 0.4s;
  animation-fill-mode: both;
}
.boxplus {
  cursor: pointer;
}
</style>

动画组件引入与使用

// html
<div class="case-img-box">
  <MyPulse>
     <img :src="item.url" alt="" />
  </MyPulse>
</div>

// ts
import MyPulse from '@/yourpath'