【源码】基于JavaScript的动画库项目

项目简介

本项目名为“JS动画库”，是一个基于JavaScript的动画库。它为开发者提供了简单、易用且高效的动画实现方式，支持使用rem作为长度单位，附带渐隐效果的banner动画。项目兼容IE9及以上版本，适用于各种Web开发场景。

项目的主要特性和功能

1. 支持rem单位，可自动将其转换为px。
2. 提供多种预定义动画效果，如fadeIn、fadeOut、fadeToggle、slideUp、slideDown、slideToggle等。
3. 支持自定义动画的执行时间、延迟、次数以及缓冲方式。
4. 附带渐隐效果的banner动画，适用于轮播图等场景。
5. 支持自动上下滑动功能，对display='none'且未指定宽高的元素有效，能根据元素内容自动调整尺寸。

安装使用步骤

安装

通过npm安装JS动画库： bash npm install @blog1997/animate

引入库

在项目中引入动画库： javascript import animate from '@blog1997/animate'

使用示例

基础动画

javascript Animate(document.querySelector('div'), { width: '400px', height: '12rem', easing: 'bezier(0.5, 2)', duration: 3000 })

自动渐隐渐显

javascript Animate(el, 'fadeToggle')

自动上下滑动

javascript function slideToggle () { Animate(document.querySelector('div'), { ani: 'slideDown', delay: 700 }) }

Banner动画

HTML结构

```html

• 1
• 2
• 3

```

调用Banner动画

javascript import '@blog1997/animate/banner-animation' Animate.bannerFader(document.querySelector('.container'), {speed: 540, interval: 5000})

通过以上步骤，可轻松将JS动画库集成到项目中，实现丰富的动画效果。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】