Schritt-Animation arbeitet nicht mit Geschwindigkeitsfortschritt

Question

Wenn ich die Kraft der Geschwindigkeit kenne. Ich möchte alle meine CSS3-Animation in meinen Apps mit Velocity konvertieren. Und jetzt habe ich Probleme mit der Schrittanimation.

Dies ist das Snippet

$el = $(".velocity-animation"); 
 

 
$el.velocity({ 
 
\t paddingLeft : "0" 
 
}, { 
 
\t \t duration: 3000, 
 
    easing : "ease", 
 
    \t progress: function(elements, complete) { 
 
    \t var step = complete * 100 ; 
 
    \t if(step <= 50){ 
 
     \t \t $el.velocity({ 
 
      \t paddingLeft : "50px" 
 
      }) 
 
     } else if(step <= 70){ 
 
     \t $el.velocity({ 
 
      \t paddingLeft : "0px" 
 
     }) 
 
     } else if(step <= 100){ 
 
     \t $el.velocity({ 
 
      \t paddingLeft : "300px" 
 
     }) 
 
     } 
 
    } 
 
})

.css-animation, .velocity-animation { 
 
    background : red; 
 
} 
 

 
.css-animation { 
 
    animation : 3s move; 
 
} 
 

 
@keyframes move { 
 
    0% { 
 
    padding-left:0; 
 
    } 
 
    50% { 
 
    padding-left:50px; 
 
    } 
 
    70% { 
 
    padding-left:0; 
 
    } 
 
    100% { 
 
    padding-left:300px; 
 
    } 
 
}

<div class="css-animation"> 
 
    Animate it 
 
</div> 
 

 
<div class="velocity-animation"> 
 
    Animate It 
 
</div> 
 

 

 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.1/velocity.min.js"></script>

Und hier ist die Geige https://jsfiddle.net/nLx3z32z/

Answer 1

Sie

Velocity.RunSequence(mySequence); 

verwenden könnte Schritt-Animation (Animation in Folge) ausführen.

Beispiel:

var animationSequence = [ 
    { e: $("#yourElm"), p: { translateX: 0 } , o: duration: 300 }, 
    { e: $("#yourElm"), p: { translateX: 100, opacity: 0 } , o: duration: 300 }, 
    { e: $("#yourElm"), p: { translateY: 100, rotateZ: 45 } , o: duration: 150 } 
]; 
$.Velocity.RunSequence(animationSequence);