How to animate translateX with velocity.js without affecting translateY?

Question

When I try to animate translateX directly, it shows the wrong Y position and no animation. But it works fine I use $.css('transfom', 'translate(x,y)') inside begin and complete options. Why doesn't the first method work?

does not work:

$("#element").velocity({
  translateX: '15px'
}, {
  duration: 150,
  easing: "swing"
}).velocity("reverse");

#element {
  margin: 0;
  top: 50%;
  left: 15px;
  transform: translate(0, -50%);
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js"></script>

<div id="element">item</div>

this works:

$("#element").velocity({
  left: "+=0px"
}, {
  duration: 150,
  easing: "swing",
  begin: function() {
    $(this).css('transform', 'translate(15px,-50%)')
  },
  complete: function() {
    $(this).css('transform', 'translate(0,-50%)')
  }
});

#element {
  margin: 0;
  top: 50%;
  left: 15px;
  transform: translate(0, -50%);
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js"></script>

<div id="element">item</div>