0.0.4-beta • Published 3 years ago
@blog1997/animate v0.0.4-beta
JavaScript 动画
允许使用rem作为长度单位 (统一处理成px)
附带banner动画(渐隐效果)
兼容性 IE >= 9 ...语法
Animate(el, config , callback)
参数
el
执行动画的dom元素
config
{
ani: String, // 选填,预定义的动画,如fadeIn, fadeOut, fadeToggle, slideUp, slideDown, slideToggle
duration: Number, // 选填,动画执行的时间(毫秒计),默认700ms
delay: Number, // 选填,动画延迟(毫秒计),默认0
times: Number, // 选填,动画执行的次数,默认1
easing: String, // 选填, 缓冲. 'bezier(param1 [,param2])' | 'swing' | 'liner'
}
callback
回调函数,会将el作为参数调用
安装
npm install @blog1997/animate
使用
import animate from '@blog1997/animate'
hello world
Animate(document.querySelector('div'), {
width: '400px',
height: '12rem',
easing: 'bezier(0.5, 2)',
duration: 3000
})
# 自动渐隐渐显
Animate(el, 'fadeToggle')
slideToggle也对display = 'none',并且没有指定宽高的元素有效。会根据元素中的内容自动调整尺寸。
# 自动上下滑动
function slideToggle () {
Animate(document.querySelector('div'), {
ani: 'slideDown',
delay: 700
})
}
该动画插件自带一个渐隐效果的banner动画。
语法
Animate.bannerFader(element , config)
参数
element
HTMLElement
config (选填)
Object
{
speed: Number, // 每张图片渐隐的时间
interval: Number // 图片渐隐之后间隔的时间
}
HTML结构如下
<div class="container">
<a href="/"><img src=""/></a>
<a href="/"><img src=""/></a>
<a href="/"><img src=""/></a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
给结构赋予样式
.canvas{
left: 0;
top: 0;
font-size: 0;
overflow: hidden;
width: 880px;
height: 350px;
position: relative;
}
.canvas a{
position: absolute;
}
.canvas ul{
width: 150px;
height: 27px;
z-index: 4;
position: absolute;
left: 230px;
bottom: 7px;
text-align: center;
line-height: 27px;
}
.canvas img{
width: 880px;
height: 350px;
}
.canvas li{
width:18px;
height: 18px;
border-radius: 17px;
margin-right:15px;
display: inline-block;
transition: 0.3s;
line-height: 18px;
}
.canvas li:after{
content: '';
width: 6px;
height: 6px;
border-radius: 6px;
display: inline-block;
border: 2px solid #FFFFF0;
vertical-align: middle;
margin: 0;
padding: 0;
}
.canvas ul .on{
background: rgba(255,255,230, 0.5);
box-shadow: 0 0 5px white;
}
.canvas ul .on:after{
background-color: #FFFFF0;
}
给结构赋予相关的行为
import '@blog1997/animate/banner-animation'
Animate.bannerFader(document.querySelector('.container'), {speed: 540, interval: 5000})
0.0.4-beta
3 years ago
0.0.3-beta
4 years ago
0.0.2-beta
4 years ago
0.0.1-beta
4 years ago
0.0.0-beta
4 years ago
1.0.0
4 years ago