仿csdn头像动画@mouseenter + @mouseleave + animation（antdVue）

<div class="header-avatar" @mouseleave="() => { avatarVisi = true; floatCardVisi = false}">
        <a-avatar v-show="avatarVisi" :class="floatCardVisi === true ? 'avatarAnimation' : ''" class="avatar" shape="circle" :src="user.avatar" @mouseenter="() => { floatCardVisi = true }"/>
        <div class="floatCard" :class="floatCardVisi === true ? 'floatCardAnimation' : ''">
              <a-avatar class="floatCard-avatar" shape="circle" :src="user.avatar"/>
              <div class="floatCard-cont">
                <div style="width: 100%; padding-top: 25px;">
                    <div style="font-weight: bold; height: 25px;line-height: 25px; margin-top: 10px;">{{users.description}}</div>
                    <div class="floatCard-item" @click="authTrusteeShip">
                        <a-icon type="security-scan" class="icon"/>
                        <span>一只猫</span>
                        <div style="width: 14px; height: 1px;"></div>
                    </div>
                    <div class="floatCard-item" @click="showDrawer">
                        <a-icon type="setting" class="icon"/>
                        <span>两只猫</span>
                        <div style="width: 14px; height: 1px;"></div>
                    </div>
                    <div class="floatCard-item" >
                        <a-icon type="user" class="icon"/>
                        <span>三只猫</span>
                        <div style="width: 14px; height: 1px;"></div>
                    </div>
                    <div class="floatCard-item floatCard-item-footer" @click="logout">
                        <a-icon type="poweroff" class="icon"/>
                        <span>退出登录</span>
                        <div style="width: 14px; height: 1px;"></div>
                    </div>
                </div>
              </div>
      </div>
      </div>

  data () {
    return {
        avatarVisi: true,
        floatCardVisi: false,
      user: {
        name: '前端嘤嘤怪',
        avatar: require('./img/user-default.png')
      }
    }
  },

    // less
  .header-avatar{
      width: 55px;
      height: 100%;
      position: relative;
      line-height: 54px;
      text-align: center;
      .avatar{
          cursor: pointer;
          width: 30px;
          height: 30px;
      }
  }
  .avatarAnimation{
      animation: avatarAnimation .3s forwards;
      -webkit-animation: avatarAnimation .3s forwards; /* Safari 和 Chrome */
  }
  .floatCardAnimation{
      display: block!important;
      animation: floatCardAnimation .3s forwards;
      -webkit-animation: floatCardAnimation .3s forwards; /* Safari 和 Chrome */
  }  
  @keyframes floatCardAnimation{
        0%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
  @keyframes avatarAnimation{
      0%{
          width: 30px;
          height: 30px;
      }
      100%{
          width: 50px;
          height: 50px;
          transform:translate(-10px, 27px);/**下移元素**/
          -ms-transform:translate(-10px, 27px);
          -webkit-transform:translate(-10px, 27px);
      }
  }
  .floatCard{
      display: none;
      width: 150px;
      position: absolute;
      top: 30px;
      left:  calc(~"(-50px - 8px + 1px)");
      .floatCard-avatar{
          height: 50px;
          width: 50px;
          float: left;
          margin-left: calc(~"(50% - 25px)");
      }
      .floatCard-cont{
          background-color: #fff;
          margin-top: 25px;
          box-shadow: 0 2px 5px rgba(24, 31, 36, .34);
          padding: 0 0 15px 0;
      }
  }