动态动画的问题

Question

I am creating an object which has 2 properties:

animationName - an array with the names of pre-made @keyfame animations

&

animate - a function which accepts a target, animation name, duration and timing function

I have the animate function checking that atleast one of the selected targets exist and I am also making sure that the animation name matches one of the indexes in animationName.

If I manually enter the style attribute and animation information, it works as I would expect, however, I cannot seem to get the code to work in the JS!

I have tried different things such as .prop() but I am pretty sure .attr() is right.

Here is the JS:

var animateElement = {
            //put in our animations that we know exist
            animationName: ["bounce", "shake"],
            //set up an animate renderer
            animate: function(target, animationName, duration, timingFunction) {
                        //cache the known animations in an easy to use variable
                        var selectedAnim = this.animationName;

                        //query the target to make sure it exists
                        var el = document.querySelectorAll(target);

                        //make sure atleast one of the targets exist
                        if (el.length != -1) {
                                    //check if the parameter animation is equal to one of our available animations
                                    if ($.inArray(animationName, selectedAnim) != -1) {
                                                //if the animation exists, change the style attribute of the target element to run the animation
                                                el.attr("style", "animation:" + animationName + " " + duration + " " + timingFunction);
                                    } else {
                                                //otherwise alert that the selected animation is invalid (doesn't match our array of known animations)
                                                alert("invalid animation selected");
                                    }
                        }
            },
}
animateElement.animate("button", "shake", "0.25s", "infinite");

SASS:

@-webkit-keyframes shake 
    0%
        transform: translateX(0)
    25%
        transform: translateX(-25px)
    50%
        transform: translateX(0)
    75%
        transform: translateX(25px)
    100%
        transform: translateX(0)

@keyframes shake 
    0%
        transform: translateX(0)
    25%
        transform: translateX(-25px)
    50%
        transform: translateX(0)
    75%
        transform: translateX(25px)
    100%
        transform: translateX(0)

@-webkit-keyframes bounce 
    0%
        transform: translateY(0)
    25%
        transform: translateY(-25px)
    50%
        transform: translateY(0)
    75%
        transform: translateY(25px)
    100%
        transform: translateY(0)

@keyframes bounce 
    0%
        transform: translateY(0)
    25%
        transform: translateY(-25px)
    50%
        transform: translateY(0)
    75%
        transform: translateY(25px)
    100%
        transform: translateY(0)

Answer 1

There are two issues with your code which is preventing it from working properly and they are as follows:

1. document.querySelectorAll returns a nodelist and so you can't directly set attributes. You either have to loop through the returned nodes (or) assign the attributes to one single item in the node list using [x] .
2. .attr() is a jQuery method but the el is not a jQuery object. You need to use the vanilla JS equivalent which is .setAttribute .

If you want to test by applying the animation property (through style attribute) for one node then use the below code and it will apply the property to only the first node returned.

el[0].setAttribute("style", "-webkit-animation:" + animationName + " " + duration + " " + timingFunction);

For your actual scenario, traverse through all nodes returned by using a for loop like below and then assign the animation property:

for (var i = 0; i < el.length; i++) {
  el[i].setAttribute("style", "animation:" + animationName + " " + duration + " " + timingFunction);
}

Below is a sample snippet with a random animation effect added. I had included the prefix library in the snippet only for supporting the older browsers (I am using one :D).

 var animateElement = { //put in our animations that we know exist animationName: ["bounce", "shake"], //set up an animate renderer animate: function(target, animationName, duration, timingFunction) { //cache the known animations in an easy to use variable var selectedAnim = this.animationName; //query the target to make sure it exists var el = document.querySelectorAll(target); //make sure atleast one of the targets exist if (el.length != -1) { //check if the parameter animation is equal to one of our available animations if ($.inArray(animationName, selectedAnim) != -1) { //if the animation exists, change the style attribute of the target element to run the animation el[0].setAttribute("style", "animation:" + animationName + " " + duration + " " + timingFunction); } else { //otherwise alert that the selected animation is invalid (doesn't match our array of known animations) alert("invalid animation selected"); } } }, } animateElement.animate("div", "shake", "0.25s", "infinite"); 

 @keyframes shake { from { transform: translateX(200px); } to { transform: translateX(0px); } } div { height: 200px; width: 200px; border: 1px solid; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Some content</div>