Question

我想知道在这些示例中滑动元素的最佳技巧是什么：

http://demos.flesler.com/jquery/localScroll/#section1c

但Pure Javascript NOT jQuery或任何图书馆。

示例结构

<div id="holder">
    <div id="bridge" onclick="slide('content')">Click to slide</div>
    <div id="content" style="display:block;">The content</div>
</div>

因此，如果我点击id=bridge id=content将slide up并将display设置为none，如果我再次点击它，则设置为display {1}}至block和slides down;

Answer 1

滑动动画本身就像javascript中的所有动画一样，是使用计时器功能完成的：setTimeout或setInterval。对于像这样的简单效果，我总是更喜欢setTimeout，因为与setInterval相比，结束动画序列更容易。它的工作原理是使用setTimeout更改CSS属性值：

// move the content div down 200 pixels:

var content = document.getElementById('content');

function moveDown () {
    var top = parseInt(content.style.marginTop); // get the top margin
                                                 // we'll be using this to
                                                 // push the div down

    if (!top) {
        top = 0; // if the margin is undefined, default it to zero
    }

    top += 20; // add 20 pixels to the current margin

    content.style.marginTop = top + 'px'; // push div down

    if (top < 200) {
        // If it's not yet 200 pixels then call this function
        // again in another 100 milliseconds (100 ms gives us
        // roughly 10 fps which should be good enough):
        setTimeout(moveDown,100);
    }
}

这基本上是javascript动画的基础知识。这个想法非常简单。您可以将任何CSS样式属性用于动画：top和left用于绝对或相对定位的元素，边距如我的示例，宽度，高度，透明度等。

现在，至于具体案例中使用的内容取决于您的意图究竟是什么。例如，你所描述的最简单的事情就是改变div高度直到它变为零。类似的东西：

function collapseContent () {
    var height = parseInt(content.style.height);

    if (!height) {
        height = content.offsetHeight; // if height attribute is undefined then
                                       // use the actual height of the div
    }

    height -= 10; // reduce height 10 pixels at a time

    if (height < 0) height = 0;

    content.style.height = height + 'px';

    if (height > 0) {
        // keep doing this until height is zero:
        setTimeout(collapseContent,100);
    }
}

但这不是示例jQuery插件的作用。它通过移动其顶部和左侧样式属性来移动元素，并通过使用带有overflow:hidden的容器div来隐藏内容。

Answer 2

我的解决方案使用css转换：

<style type="text/css">
    #slider {
        box-sizing: border-box;
        transition: height 1s ease;
        overflow: hidden;
    }
</style>

<div id="slider" style="height: 0">
    line 1<br>
    line 2<br>
    line 3
</div>

<script>
    function slideDown(){
        var ele = document.getElementById('slider');
        ele.style.height = "3.3em";

        // avoid scrollbar during slide down
        setTimeout( function(){
            ele.style.overflow = "auto";
        }.bind(ele), 1000 );                        // according to height animation
    }

    function slideUp(){
        var ele = document.getElementById('slider');
        ele.style.overflow = "hidden";
        ele.style.height   = "0";
    }
</script>

Javascript幻灯片元素

2 个答案: