当前位置:主页 > JavsScript库 > 动画 >

具有平滑CSS3过渡的切换元素 – slide-element
栏目分类:动画   发布日期:2021-09-01   浏览次数:

slide-element 是一个超小型 JavaScript 库,用于通过基于 CSS3 的平滑向上/向下滑动切换来切换元素的可见性。

jQuery 滑动和切换方法的绝佳替代品,可用于显示/隐藏 UI 组件中的任何元素,如下拉菜单、手风琴、选项卡等。

还提供了 Promise 支持,使您可以在动画完成后做一些很酷的事情。

如何使用它:

1. 用 NPM 安装滑动元件。

# NPM
$ npm i slide-element --save

2. 将组件导入到您的项目中。

// 根据当前状态切换一个元素
import { toggle } from "slide-element";
 
// 向上滑动
import { up } from "slide-element";
 
// 向下滑动
import { down } from "slide-element";

3. 或者从 dist 文件夹加载 slide-element.min.js 脚本。

<script src="./dist/slide-element.min.js"></script>

4. 创建一个由滑动元素显示和隐藏的元素。

<div id="example">
    这里可以写很多内容

</div>

5. 在页面加载时隐藏元素。

.example {
  display: none;
  background: blue;
}

6. 启用触发按钮以使用向上/向下滑动动画切换元素。

<button id="trigger">点击我</button>
document.getElementById('trigger').addEventListener('click', (e) => {
  SlideElement.toggle(document.getElementById('example'));
});
// 向上滑动
SlideElement.up(document.getElementById('example'));
 
// 向下滑动
SlideElement.down(document.getElementById('example'));

7. 使用promise then 方法在动画完成后执行一个动作。

SlideElement.toggle(document.getElementById("example")).then(() => {
// 做某事
});

8. 配置滑动动画。

SlideElement.toggle(document.getElementById('example'),{
  duration: .25,
  easing: 'ease-in-out'
});

9. 设置幻灯片元素的 CSS Display 属性。

SlideElement.toggle(document.getElementById('example'),{
  display: "flex"
});


官方网站:https://github.com/alexmacarthur/slide-element

相关热词: slide-elemen切换元素

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库