vue制作一个聚焦文字移动到输入框左侧，失焦回到输入框内部的动画需求（SEAN的日志）

html部分

<a-input
    v-model="params.username"
    placeholder
    @focus="focus1"
    @blur="blur1"
    ref="input1"
    />
 <span :class="{ title: true, focusFlag1: focusFlag1 }">用户名</span>

js部分

focus1(event) {
      this.focusFlag1 = true;
    },
blur1(event) {
      if (this.$refs.input1.value == "") {
        this.focusFlag1 = false;
      }
    },

css部分

  .title {
    font-size: 16px;
    text-align: justify;
    position: absolute;
    left: 20px;
    top: -20px;
    padding: 10px;
    user-select: none;
    pointer-events: none;
    transition: all 0.6s ease;
    color: rgba(0, 0, 0, 0.45);
  }

  .title.focusFlag1 {
    transform: translateX(-100px);
  }