jsAnimate
jsAnimate copied to clipboard
一个js特效插件库jsAnimate,无需css即可实现声明式懒加载动画(结合了animate.css、wow.js、vue-transition的特点)。另外还有轮播图、旋转木马等特效。
jsAnimate(只需一个 js,无须 css,即可实现懒加载过渡动画
(综合实现了类似 animate.css、wow.js、vue-transition 的功能)、轮播图
、旋转木马
等特效,可在页面任一处复用,自适应页面尺寸变化,所有方法都在 jsAnimate 对象中调用)
使用:(文档中有在线查看 demo 和教程的链接)
点击查看过渡动画 lazyfade 教程
点击查看旋转木马 slick 演示
点击查看轮播图 slide 演示
有效文件: dist 文件夹中打包后的 jsAnimate.js
如果你通过
<script type="text/javascript" src="jsAnimate.js"></script>
同时 jsAnimate.js 也支持通过 ES6 模块化的方式引入
import jsAnimate from 'jsAnimate.js'
开发环境下调试先安装依赖
npm install
打开本地服务器
npm run serve
打包
npm run build
功能更新与演示文档:
更新时间 updata: 2019.6.25 升级旋转木马和轮播图的api(向后兼容),适用于同一页面有多个旋转木马或轮播图,且它们使用相同的配置参数的场景。将多个id以数组的形式作为第一个参数,除id外的配置对象作为第二个参数。之前的单参数api依然支持。
更新时间 updata: 2019.5.23 jsAnimate.js模块化重构,打包后的文件在dist目录,模块化源文件在src目录,旧的js单文件在oldfile目录。注意:轮播图插件中图片引用于网络,因为域名到期原因,可能无法打开(现在可以打开了),可以在本地HTML中替换成自己的图片查看效果。
更新时间 updata: 2019.4.3—4.13 懒加载过渡动画功能中增加duration属性和transition-enter属性,优化了性能,修复了一些bug(until4.26)。(点击查看过渡动画lazyfade教程)
现在你可以通过在元素标签里加入duration和transition-enter属性,以显式的定制进入和移出的持续时间、延迟时间、初始过渡样式、贝塞尔曲线(或ease等)。比如,我们可以拥有一个精心编排的一系列过渡效果,其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。同时还可以搭配自定义动画效果使用,也可以引入第三方动画库,如Animate.css。duration和transition-enter属性的某些用法参考了vue的transition使用风格。所以用过vue的同学可能会比较容易理解上手。
更新时间 updata: 2019.3.20 新增功能--新增类似animate.css和wow.js的懒加载过渡效果: 只需引入jsAnimate.js,然后在你想要的元素class属性里加入相关的类名即可,具体类名对应的效果以及使用中的注意事项,点击查看过渡动画lazyfade.html中的演示教程,或下载该repository。
--2019.3.26 新增放大过渡,类名:zoomin、zoomin-r。
更新时间 update: 2019.3.17 新增功能--新增旋转木马效果:方法名jsAnimate.slick。旋转木马插件, 同样只需引入一行js, 可自定义滚动的速度、一页的展示数量、高度、一次滚动一个还是一整页(默认是一次滚动一个)、展示区域内的元素按行还是列排列(默认是列)、是否支持图片缩放、是否支持自动轮播以及轮播速度。点击查看旋转木马演示slick.html教程在HTML代码中,或下载该repository。
首次发布时间 uploadTime:2019.3.15 目前该插件的亮点是非常方便的轮播图方法。只需要一个div标签将所有img标签嵌套,然后再写一行js即可。可以根据浏览器窗口大小的改变做出自适应。轮播图css样式什么的完全不用管,js会识别里面的img数量并作出相应的处理。如果div里面只有一个img,那么和正常情况下一样,不会有轮播图效果,img宽度会占满div(相当于一张全屏大图)。同时还能自由打开或关闭轮播图中的部分内容样式和功能。点击查看轮播图演示slide.html教程在HTML代码中,或下载该repository。
最初版本:
插件有一些动画方法,具体用法如下
jsAnimate对象中目前存放了四个方法
更正,方法有新增:最新的更新在最顶部
分别是:
逐渐显示:show(node