vue数据可视化大屏项目中，需要一些动画元素让页面更生动，这里将gsap上下浮动的动画效果记录下来，方便可能复用。

<template>
  <div class="titleBg">
    <div class="titleBgl">
      <div class="icon">
        <img class="titleIconInner" src="../../assets/home/item/icon_user.png" alt="">
      </div>
      <span class="titleInfo">{{ title }}</span>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import gsap from "gsap";

// 引入其他插件
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/Flip";
import Draggable from "gsap/Draggable";

// 注册插件
gsap.registerPlugin(ScrollTrigger, Draggable, Flip);
export default {
  name: "title",
  data() {
    return {}
  },
  props: {
    title: {
      type: String,
      default() {
        return '';
      }
    },
    icon: {
      type: String,
      default() {
        return '';
      }
    },
  },
  watch: {},
  mounted() {
    var that = this;
    gsap.to('.titleIconInner', {
      duration: 1, y: 3, repeat: -1, delay: 2, yoyo: true, onComplete: () => {
        console.log('动画完成')
      }
    })
  },
}
</script>

<style lang="scss" scoped>
.titleBg {
  width: 100%;
  height: 60px;
  background: url("./assets/itemTitleInner.png") left bottom no-repeat;
  background-size: 100% 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  flex-shrink: 0;

  .titleBgl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .titleInfo {
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      margin-left: 5px;
    }

    .icon {
      background: url("../../assets/home/item/icon_di.png") 1px 28px no-repeat;
      width: 36px;
      height: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }
  }

}
</style>