How to animate translate properties with Velocity.js?

问题

I have a simple block that is suppose to move left 200px with translateX. It will move left with position left. I can't seem to move the block with translateX or translateY. CSS values for Transform translate will work. Reason to use translate is the performance compared to position. I commented out the position left with Velocity to give you an idea what I'm trying to achieve.

var button  = document.getElementById('button');
var adiv = document.getElementById('panel');
button.addEventListener('click', function(){
    //Velocity(adiv, { left: '100' }, [ 500, 20 ]);
    Velocity(adiv, {translateX: 200}, [ 500, 20 ]);
})

#panel {
    display: block;
    position: absolute;
    background: #ffffbd;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
   }

button {
    top: 90%;
    position: relative;
    display: block;
}

<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


    <body>
      <div id="topbar"></div>
       <div id="panel">
       </div>
   <button id="button">start</button>
   </body>

回答1:

In Velocity V2 there are no longer any transform shortcuts such as translateX - just use the css transform property properly and it'll work (there are issues in V1 with trying to do that unfortunately).

Velocity(adiv, {transform:"translateX(200px)"}, [ 500, 20 ]);

If there's no forcefeeding it'll animate from a value of 0.

回答2:

Velocity seems to be picking up steam with version 3 of VUE coming up. I highly suggest the Velocity 2.0 docs to be a little more updated with information such as:

In Velocity V2 there are no longer any transform shortcuts such as translateX - just use the css transform property properly and it'll work (there are issues in V1 with trying to do that unfortunately). Velocity(adiv, {transform:"translateX(200px)"}, [ 500, 20 ]);

Or reach out to the VUE team as they are still using the Velocity 1.x examples.

回答3:

Easy example with jQuery:

$('.box').on('click', function() {  
  $(this).velocity({
    transform: ["translateX(100px)", "translateX(0px)"]
  }, {duration: 1000});
});

来源：https://stackoverflow.com/questions/48964932/how-to-animate-translate-properties-with-velocity-js

标签

javascript

jquery

velocity.js