Question

我正在做一个关于动画div的项目，以便顺畅地滑入用户的视图页面。我注意到div会坚持正确并且以margin-left:-700px移动，这是我设置的但不会从左到右移动整个div。

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;
}

此外，在选择预算选项budgetForm后，它会同时滑动budgetForm和brandForm，我不想发生这种情况，之后的其他选项是合规的，没有遇到任何问题。这发生在show(elem) function。如何防止两者同时动画？

然后在确认选择后，我注意到queryBox将从右向左滑动，很快进入视野，它会追加并恢复正常。我只设置了margin-left:1000px;。也许我可以使用更好的风格属性？

最后，全部重置按钮再次重置，选择所有选项后，它不会动画或显示第一次访问时应该喜欢的任何内容。

这些是我试图解决的唯一难以解决的问题，但似乎无法做到正确。非常感谢您的帮助。拜托，没有jQuery！

为了更好地展示我的意思，我提供了一个jsfiddle：http://jsfiddle.net/WLAC5/

Answer 1

我做了你希望如何处理这个问题的部分内容，当你在头部创建webkit动画时，你根本不想做什么，最好用一个类来表示状态变化和动画。

更新了小提琴：

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

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

                elem.classList.add('pulseIn');

            }
            return elem;
        }

在css中，需要更多供应商前缀，但您明白了这一点：

@-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;
        }

最后，为了确保你没有两个滑入，将其添加到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>

你不应该寻找进出幻灯片的余量，最好使用css3 translateX来移动东西，因为它对动画来说很便宜。否则你也可以尝试使用left属性进行定位。

古德勒克！

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

1 个答案: