如何使用@keyframes正确地动画每个div在纯JavaScript中滑动？

Question

I am doing a project on animating the divs to slide smoothly into the user's view page. I notice the div will stick it's right and move with margin-left:-700px , which is what I had set but will not move the entire div from the left to right.

function show(elem) 
{
    elem = getElem(elem);
    if (elem) 
    {
        elem.style.display = "block";

        var cssAnimation = document.createElement('style'); //responsible for creating animation with <style> element
        cssAnimation.innerHTML = "@keyframes pulseOnce { 0% {margin-left: -700px;} 50%{margin-left: 10px;} 75%{background-color:black;color:white;} 100%{background-color:white;color:inherit;} }";
        cssAnimation.innerHTML += "@-webkit-keyframes pulseOnce { 0% {margin-left: -700px;} 50%{margin-left: 10px;} 75%{background-color:black;color:white;} 100%{background-color:white;color:inherit;} }";
        document.head.appendChild(cssAnimation);
        elem.style.animation = "pulseOnce 1.5s 1";
        elem.style.webkitAnimation = "pulseOnce 1.5s 1";
    }
    return elem;
}

Also, right upon selecting the budget option budgetForm , it will slide both, the budgetForm and the brandForm simultaneously which I don't not want to happen, the rest after that is compliant and experience no problems. This is happening in the show(elem) function . How do I prevent both from animating at the same time?

Then after confirming the selections, I notice the queryBox will slide from right to left shortly coming into view, it appends and go back to normal. I only set a margin-left:1000px; . Maybe there's a better style property I could use?

And lastly, the Reset All button resets again and upon selecting all the options, it does not animate or bring up anything like it's supposed to like upon first visit.

Theses are the only hard inconsistencies I'm trying to solve, but can't seem to get it right. Your help would be greatly appreciated. Please, no jQuery!

To better show what I mean, I provided a jsfiddle: http://jsfiddle.net/WLAC5/

Answer 1

I did part of what you wanted to give you an idea of how you should approach this, at the moment you are creating webkit animations in the head which you dont want to do at all, its better to use a class to indicate a state change and a animation.

Updated fiddle:

http://jsfiddle.net/WLAC5/2/

function show(elem) 
        {
            elem = getElem(elem);
            if (elem) 
            {
                elem.style.display = "block";

                elem.classList.add('pulseIn');

            }
            return elem;
        }

In the css, needs more vendor prefixes but you get the idea:

@-webkit-keyframes pulseOnce { 
            0% {-webkit-transform: translateX(-100%);} 
            50%{-webkit-transform: translateX(0%);} 
            75%{background-color:black;color:white;} 
            100%{background-color:white;color:inherit;} 
        }
        .pulseIn {
            -webkit-animation: pulseOnce .7s ease-in-out both;
        }

And finally, to ensure that you dont get two sliding in, add this to the html

<form id="budgetForm" class="pulseIn">
                Select your DSLR budget range:
                <select id="budgetSel" onChange="onChange();">
                    <!--<option value="selectOneBudget"  selected="selected">Select one</option>
                    <option value="fiveHundredDollars">&lt; $500</option>
                    <option value="thousandDollars">&lt; $1000</option>-->
                </select>
            </form>

You shouldnt look for margin to that slide stuff in and out, preferably use css3 translateX to move stuff around as it is cheap to animate. Otherwise you can also try postioning with left property.

Goodluck!