Liike.js是一款最小的js过渡动画库。Liike.js可以为任何元素制作平滑的过渡动画,并且内置有多种easing过渡动画效果。
Liike.js支持IE10+浏览器,IE9及以下的IE浏览器需要添加requestAnimationFrame文件。
安装
可以通过npm来安装Liike.js插件。
npm i liike
使用方法
import liike from 'liike'; /** * Define how Liike should animate based on the tweened values * @param {Element} The element you're tweening * @param {Object} Tween settings */ const transform = (target, data) => { const { x = 0, y = 0, opacity = 1 } = data; target.style.transform = `translate(${x}px, ${y}px)`; target.style.opacity = opacity; }; const tween = liike(transform); const $hello = document.getElementById('hello'); tween($hello, { delay: 0, duration: 1000, easing: 'bounceOut', from: { y: -100, opacity: 0 }, to: { opacity: 1 } });
配置参数
Liike.js插件的配置参数说明如下:
-
delay
:多少毫秒延迟后开始过渡动画。 -
duration
:过渡动画的持续时间。 -
easing
:过渡动画的easing函数。 -
from
:过渡动画开始值。 -
to
:过渡动画的结束值。 -
onstart
:过渡动画开始后的回调函数。onstart(target)
-
onprogress
:过渡动画过程中的回调函数。onprogress(target, t)
-
onend
:过渡动画结束后的回调函数。onend(target)
可用的easing函数
- linear
- quadIn, quadOut, quadInOut (power to 2)
- cubicIn, cubicOut, cubicInOut (power to 3)
- quartIn, quartOut, quartInOut (power to 4)
- quintIn, quintOut, quintInOut (power to 5)
- sineIn, sineOut, sineInOut
- bounceIn, bounceOut, bounceInOut
Liike.js过渡动画库的github地址为:https://github.com/LiikeJS/Liike
本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/jQuery/jquery-tools/201709194747.html
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!