由于项目不允许引入任何js库,要求全部用原生js写,现在又需要jquery中slideUp和slideDown的效果,求前辈们指导~~
p.s.那如果这个高度需要js动态获取呢?把js写在CSS里好像影响性能,而且如果上面有很多不同的块需要隐藏,每个页面的块都不一样,这样做就很麻烦吧。之前我使用的是:
setTimeout("window.scrollBy(0,document.getElementById('p').getBoundingClientRect().top-10)",0);
这是个搜索框,当他聚焦的时候需要置顶到页面的顶端,但又因为需要在手机上面显示,当一个输入框聚焦的时候手机会弹出一个键盘,弹出这个键盘的同时页面也会自动上移一部分,这个时候这样做就会造成肉眼可见的两次移动,体验非常不好,所以想改一改,求解~~
思路很简单 :
如果楼主的浏览器支持css3 transition属性,按F12,然后在console里面输入下面代码
接着是见证奇迹的瞬间,最后输入下面的代码(请将页面滚动到顶部查看效果)
知道思路后,实现slideUp和slideDown就很简单,首先设置
overflow
为hidden
,然后通过setTimeout
动态改变height
就可以了@大白菜炖豆腐花花