摘要:移动端导航栏有个很常见的折叠菜单,有插件实现,有组件。最近用无插件实现一个这样的效果。探究历程直接采用,虽然实现了控制容器的显示和隐藏,但是效果生硬。
移动端导航栏有个很常见的折叠菜单,bootstrap有collapse插件实现,jQuery UI有Accordion组件。最近用js无插件实现一个这样的效果。 探究历程
display:none;
直接采用display,虽然实现了控制容器的显示和隐藏,但是效果生硬。
//jq或者zepeto的hide和show方法就是采用这个属性
$("#el").hide();
$("#el").show();
/**
show: function() {
return this.each(function() {
//清除元素的内联display="none"的样式
this.style.display == "none" && (this.style.display = null)
//当样式表里的该元素的display样式为none时,设置它的display为默认值
if (getComputedStyle(this, "").getPropertyValue("display") == "none") this.style.display = defaultDisplay(this.nodeName) //defaultDisplay是获取元素默认display的方法
})
},
hide: function() {
return this.css("display", "none")
}
**/
transition: height 600ms;
改变容器的高度,配合overflow: hidden;实现平滑动画
//思路示例
//css
//html
...
//js
//这样虽然实现了效果,但是需要提前知道容器的高度
//如果设置height为auto,然而transition并没有效果
transition: max-height 600ms;
将transition的属性换成max-height,max-height会限制元素的height小于这个值,所以我们将关闭状态的值设成0,打开状态设置成足够大
//思路示例
//css
- .box {
- height: 300px;
- max-height: 0px;
- transition: max-height 600ms;
- overflow: hidden;
- background: #4b504c;
- }
//html
...
//js
- function openAndClose(){
- var el = document.getElementById("box");
- if(window.getComputedStyle(el).maxHeight == "0px"){
- el.style.maxHeight = "1040px";
- }else{
- el.style.maxHeight="0px";
- }
- }
//这样过程中就会有个不尽人意的地方,关闭的时候总会有点延迟
//原因可能是maxHeight到height这个值得过渡过程耗费了时间
获取容器真实height
网上搜了一下,拜读了内容loading加载后高度变化CSS3 transition体验优化,看到了这个方法
</>code
//思路:取消transition==》设置height:auto==》
//获取容器真实height==》设置height:0==》
//设置transition==》触发浏览器重排==》
//设置容器真实height
function openAndClose(){
var el = document.getElementById("box");
if(window.getComputedStyle(el).height == "0px"){
// mac Safari下,貌似auto也会触发transition, 故要none下~
el.style.transition = "none";
el.style.height = "auto";
var targetHeight = window.getComputedStyle(el).height;
el.style.transition = "height 600ms"
el.style.height = "0px";
el.offsetWidth;//触发浏览器重排
el.style.height = targetHeight;
}else{
el.style.height="0px";
}
}
其他
getComputedStyle() 方法获取的是最终应用在元素上的所有CSS属性对象|MDN
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/89499.html
摘要:移动端导航栏有个很常见的折叠菜单,有插件实现,有组件。最近用无插件实现一个这样的效果。探究历程直接采用,虽然实现了控制容器的显示和隐藏,但是效果生硬。 移动端导航栏有个很常见的折叠菜单,bootstrap有collapse插件实现,jQuery UI有Accordion组件。最近用js无插件实现一个这样的效果。 探究历程 display:none; 直接采用display,虽然实现...
摘要:近两年来一直在关注开发,最近也开始全面应用。首先,我们从无状态组件开始。渲染回调模式有一种重用组件逻辑的设计方式是把组件的写成渲染回调函数或者暴露一个函数属性出来。最后,我们将这个回调函数的参数声明为一个独立的类型。 近两年来一直在关注 React 开发,最近也开始全面应用 TypeScript 。国内有很多讲解 React 和 TypeScript 的教程,但如何将 TypeScri...
阅读 3082·2021-11-08 13:20
阅读 1157·2021-09-22 15:20
阅读 821·2019-08-30 15:53
阅读 2051·2019-08-30 15:43
阅读 1347·2019-08-29 17:21
阅读 599·2019-08-29 12:15
阅读 2453·2019-08-28 17:51
阅读 3208·2019-08-26 13:26