Toggle 显示隐藏
简介
本框架一共设计了三组“显示/隐藏”的函数工具，以满足不同场景的需求。
- slide组：包含axSlideDown、axSlideUp、axSlideToggle
- fade组：包含axFadeIn、axFadeOut、axFadeToggle
- Show/Hide组：包含axShow、axHide、axToggle
-
<div class="ax-row"> <div class="ax-col ax-col-8"> <a href="###" class="ax-btn ax-sm" id="sd">axSlideDown</a> <a href="###" class="ax-btn ax-sm" id="su">axSlideUp</a> <a href="###" class="ax-btn ax-sm" id="st">axSlideToggle</a> <div class="ax-break"></div> <div class="ax-padding ax-border" id="sc"> 一千年前的中国已经摆脱前代沉迷于异族的宗教，和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒，远远压过外国，这是国家文化强大民族自信的表现，一千年前的中国人自信得一塌糊涂。 </div> </div> <span class="ax-gutter"></span> <div class="ax-col ax-col-8"> <a href="###" class="ax-btn ax-sm" id="fi">axFadeIn</a> <a href="###" class="ax-btn ax-sm" id="fo">axFadeOut</a> <a href="###" class="ax-btn ax-sm" id="ft">axFadeToggle</a> <div class="ax-break"></div> <div class="ax-padding ax-border" id="fc"> 一千年前的中国已经摆脱前代沉迷于异族的宗教，和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒，远远压过外国，这是国家文化强大民族自信的表现，一千年前的中国人自信得一塌糊涂。 </div> </div> <span class="ax-gutter"></span> <div class="ax-col ax-col-8"> <a href="###" class="ax-btn ax-sm" id="show">axShow</a> <a href="###" class="ax-btn ax-sm" id="hide">axHide</a> <a href="###" class="ax-btn ax-sm" id="sht">axToggle</a> <div class="ax-break"></div> <div class="ax-padding ax-border" id="shc"> 一千年前的中国已经摆脱前代沉迷于异族的宗教，和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒，远远压过外国，这是国家文化强大民族自信的表现，一千年前的中国人自信得一塌糊涂。 </div> </div> </div> -
//slide let sc = document.querySelector('#sc'); document.querySelector('#sd').onclick = function(){ axSlideDown(sc); } document.querySelector('#su').onclick = function(){ axSlideUp(sc); } document.querySelector('#st').onclick = function(){ axSlideToggle(sc); } //fade let fc = document.querySelector('#fc'); document.querySelector('#fi').onclick = function(){ axFadeIn(fc); } document.querySelector('#fo').onclick = function(){ axFadeOut(fc); } document.querySelector('#ft').onclick = function(){ axFadeToggle(fc); } //show/hide let shc = document.querySelector('#shc'); document.querySelector('#show').onclick = function(){ axShow(shc); } document.querySelector('#hide').onclick = function(){ axHide(shc); } document.querySelector('#sht').onclick = function(){ axToggle(shc); }
axSlideDown
擦出内容动画。
完整写法：axSlideDown(elem, display,callback, duration, curve)，可简写axSlideDown(elem)，参数说明如下：
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- display:显示状态的属性（display），默认是"block"，可以填"flex"、"inline-flex"、"grid"、"inline-grid"、"inline-block"等
- callback:回调函数，无参数
- duration:持续时长，单位毫秒，如果为空则根据对象高度自动创建
- curve:动画曲线，可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快)，默认为easeOut
举例：axSlideDown('#demo','grid', '', 500, 'easeIn')
axSlideUp
擦除内容动画。
完整写法：axSlideUp(elem,display, callback, duration, curve)，可简写axSlideUp(elem)，参数说明如下：
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- display:显示状态的属性（display），默认是"block"，可以填"flex"、"inline-flex"、"grid"、"inline-grid"、"inline-block"等
- callback:回调函数，无参数
- duration:持续时长，单位毫秒，如果为空则根据对象高度自动创建
- curve:动画曲线，可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快)，默认为easeOut
举例：axSlideUp('#demo', 'grid','', 500, 'easeIn')
axSlideToggle
擦除内容切换动画。
完整写法：axSlideToggle(elem,display, downCallback, upCallback, duration, curve)，可简写axSlideToggle(elem)，参数说明如下：
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- display:显示状态的属性（display），默认是"block"，可以填"flex"、"inline-flex"、"grid"、"inline-grid"、"inline-block"等
- downCallback:展开时回调函数，无参数
- upCallback:折叠时回调函数，无参数
- duration:持续时长，单位毫秒，如果为空则根据对象高度自动创建
- curve:动画曲线，可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快)，默认为easeOut
举例：axSlideToggle('#demo','grid', '', 500, 'easeIn')
axFadeIn
渐变显示动画。
完整写法：axFadeIn(elem, display,callback, duration, curve)，可简写axFadeIn(elem)，参数说明如下：
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- display:选填项，表示css中display的属性值，可以填"block"和"flex"等
- callback:回调函数，无参数
- duration:持续时长，单位毫秒，默认200
- curve:动画曲线，可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快)，默认为linear
举例：axFadeIn('#demo','', '', 500, 'easeIn')
axFadeOut
渐变隐藏动画。
完整写法：axFadeOut(elem, callback, duration, curve)，可简写axFadeOut(elem)，参数说明如下：
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- callback:回调函数，无参数
- duration:持续时长，单位毫秒，默认200
- curve:动画曲线，可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快)，默认为linear
举例：axFadeOut('#demo', '', 500, 'easeIn')
axFadeToggle
渐变隐藏动画。
完整写法：axFadeToggle(elem, display,inCallback,outCallback, duration, curve)，可简写axFadeToggle(elem)，参数说明如下：
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- display:选填项，表示css中display的属性值，可以填"block"和"flex"等
- inCallback:显示时回调函数，无参数
- outCallback:隐藏时回调函数，无参数
- duration:持续时长，单位毫秒，默认200
- curve:动画曲线，可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快)，默认为linear
举例：axFadeToggle('#demo', '','','', 500, 'easeIn')
axShow
直接显示内容。
完整写法：axShow(elem, show, callback)，可简写axShow(elem)，参数说明如下：
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- show:显示的样式，默认是block，可选box、inline-block、block以及visible(将使用visibility:visible)
- callback:回调函数，无参数
举例：axShow('#demo', 'inline-block', '')
axHide
直接显示内容。
完整写法：axHide(elem, hide, callback)，可简写axHide(elem)，参数说明如下：
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- hide:隐藏的样式，默认是none，可选hidden(将使用visibility:hidden)
- callback:回调函数，无参数
举例：axHide('#demo', 'hidden', '')
axToggle
简单切换显示和隐藏。
完整写法：axToggle(elem,show, hide, showCallback,hideCallback)，可简写axToggle(elem)，参数说明如下：
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- show:显示的样式，默认是block，可选box、inline-block、block以及visible(将使用visibility:visible)
- hide:隐藏的样式，默认是none，可选hidden(将使用visibility:hidden)
- showCallback:显示时回调函数，无参数
- hideCallback:隐藏时回调函数，无参数
举例：axToggle('#demo', 'hidden', '')
axHeightDown
Dom高度从0到最大。
完整写法：axHeightDown(elem,arrHeight, callback, duration, curve)，可简写axHeightDown(elem)，参数说明如下：
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- arrHeight:元素高度部分，包含五个部分：{height:100,parginTop:10,paddingBottom:10,marginTop:10,marginBottom:10}
- callback:回调函数，无参数
- duration:持续时长，单位毫秒，默认200
- curve:动画曲线，可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快)，默认为linear
举例：axHeightDown('#demo', {height:600})
axHeightUp
Dom高度从最大到0。
完整写法：axHeightUp(elem,arrHeight, callback, duration, curve)，可简写axHeightUp(elem)，参数说明如下：
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- arrHeight:元素高度部分，包含五个部分：{height:100,parginTop:10,paddingBottom:10,marginTop:10,marginBottom:10}
- callback:回调函数，无参数
- duration:持续时长，单位毫秒，默认200
- curve:动画曲线，可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快)，默认为linear
举例：axHeightUp('#demo', {height:600})
-
<a href="###" class="ax-btn" id="ztm">从0~最大</a> <a href="###" class="ax-btn" id="mtz">从最大到0</a> <div class="ax-padding ax-border" id="box"> 一千年前的中国已经摆脱前代沉迷于异族的宗教，和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒，远远压过外国，这是国家文化强大民族自信的表现，一千年前的中国人自信得一塌糊涂。 </div> -
document.querySelector('#ztm').onclick = function () { axHeightDown('#box',{height:200}); }; document.querySelector('#mtz').onclick = function () { axHeightUp('#box',{height:200}); };