vue 实现腾讯云的图标移入移出动画

vue 实现腾讯云的图标移入移出动画

一张静态长图, 移入的时候产生动画效果, 移出的时候以动画的形式恢复原样.

腾讯云: https://cloud.tencent.com/

<template>
  <div class="contain">
    <el-card
      class="cardbody"
      @mouseenter.native="handleEnter"
      @mouseleave.native="handleLeave"
    >
      <div
        class="c-img"
        :class="animateClass"
        :style="{
          backgroundImage: 'url(' + img + ')',
        }"
      >div>
    el-card>
  div>
template>
<script>
export default {
  data() {
    return {
      img: require("@/assets/icon/1.png"),
      is_entery: null,
    };
  },
  computed: {
    animateClass() {
      const res = this.is_entery;
      if (res == null) {
        return "";
      }
      return res ? "entery" : "leave";
    },
  },
  methods: {
    handleLeave() {
      this.is_entery = false;
    },
    handleEnter() {
      this.is_entery = true;
    },
  },
};
script>
<style scoped>
.contain {
  padding: 20px;
  background: #f0f2f5;
}

.cardbody {
  position: relative;
}

.c-img {
  width: 128px;
  height: 128px;
  margin: 0 auto;
  display: block;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top;
}

.c-img > img {
  width: 70%;
  height: auto;
}
style>

<style scoped>
.leave {
  /* steps(24)  图片的张数-1 */
  animation: leave 0.5s steps(24) forwards;
}
.entery {
  animation: entery 0.5s steps(24) forwards;
}

@keyframes entery {
  0% {
    background-position: top;
  }

  to {
    background-position: bottom;
  }
}
@keyframes leave {
  0% {
    background-position: bottom;
  }

  to {
    background-position: top;
  }
}
style>