button鼠标悬停动画显示icon

默认icon不显示，鼠标移入从中间向右显示移入，文字向左移

icon用的element ui的

  <div class="goods-price">
    <span> BUY 39€</span>
    <i class="el-icon-shopping-cart-full"></i>
  </div>

css

    .goods-price {
      position: relative;
      display: inline-block;
      width: 120px;
      height: 40px;
      line-height: 40px;
      background-color: #f0ecec;
      border-radius: 20px;
      font-weight: 600;
      span {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        transition: 0.3s ease-in-out;
      }
      .el-icon-shopping-cart-full {
        position: absolute;
        left: 50%;
        font-weight: 600;
        font-size: 18px;
        transition: 0.3s ease-in-out;
        opacity: 0;
        line-height: 40px;
      }
    }
    .goods-price:hover span {
      left: 35%;
    }
    .goods-price:hover .el-icon-shopping-cart-full {
      opacity: 1;
      left: calc(70%);
    }