没有 jQuery 的 JavaScript 滑动

新手上路,请多包涵

我希望具有与 jQuery slidedown 类似的效果,但 使用 jQuery 或任何其他库。我知道这是“可能的”,因为 jQuery 中的任何内容都可以用纯 JavaScript 完成。只是更难。

我不能使用 jQuery,因为所有内容都必须在不使用任何库的情况下用我自己的代码编写。

有没有人只使用纯 JavaScript 做过这样的事情或任何效果?

原文由 Elliott 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 265
2 个回答

这是我从头开始编写的一段不错的代码。

它纯粹是 基于时间的

 var minheight = 20;
var maxheight = 100;
var time = 1000;
var timer = null;
var toggled = false;

window.onload = function() {
    var controller = document.getElementById('slide');
    var slider = document.getElementById('slider');
    slider.style.height = minheight + 'px'; //not so imp,just for my example
    controller.onclick = function() {
        clearInterval(timer);
        var instanceheight = parseInt(slider.style.height);  // Current height
        var init = (new Date()).getTime(); //start time
        var height = (toggled = !toggled) ? maxheight: minheight; //if toggled

        var disp = height - parseInt(slider.style.height);
        timer = setInterval(function() {
            var instance = (new Date()).getTime() - init; //animating time
            if(instance <= time ) { //0 -> time seconds
                var pos = instanceheight + Math.floor(disp * instance / time);
                slider.style.height =  pos + 'px';
            }else {
                slider.style.height = height + 'px'; //safety side ^^
                clearInterval(timer);
            }
        },1);
    };
};

在这里测试:http: //jsbin.com/azewi5/5

原文由 user372551 发布,翻译遵循 CC BY-SA 4.0 许可协议

既然已经是 2014 年了,为什么不使用 CSS transitions 而只是改变元素的 height 属性呢? 小提琴

CSS:

 .wrapper {
    transition:height 1s ease-out;
    height:0;
    overflow:hidden;
}

HTML:

 <div id="wrapper">
//content
</div>

脚本:

 document.getElementById("wrapper").style.height = //content height +"px";

2020 编辑(处理未知高度):

所以我们在 2020 年,现在更明显的是我们应该依赖 CSS 效果来制作这种动画。

但是,针对此答案提出了一个有效的观点 - 您需要在 js 代码中指定要设置动画的元素的高度,并且您可能事先不知道该值。

所以六年后,我添加了几行额外的代码来解决这个问题。

因此,如果我们使用与 2014 年旧示例中相同的 CSS 和 HTML,这就是新的 JS。 新小提琴!

 const slideDown = elem => elem.style.height = `${elem.scrollHeight}px`;

slideDown(document.getElementById("wrapper"));

原文由 Ruben Serrate 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏