不久前在某运动APP上看到一个卡片缓缓往下展示的效果,感觉这动画还可以
似乎项目中也有类似的卡片列表,列表的展示是直接显示出来的,加上动效之后应该更有活力,便照着样子实现了一下
这种效果,核心点就是添加了个CSS动画,主要控制了四个属性
先看HTML结构部分
<body>
<article>
<!-- 卡片容器 -->
<div class="items"></div>
<a href="javascript:;" class="items-more-btn">展开</a>
</article>
<!-- 模板结构 -->
<script type="text/template" id="item-tpl">
<div class="item item__anim item__anim-{{index}}">
<h2>标题{{index}}</h2>
<p>{{content}}</p>
</div>
</script
绑定事件,点击展开则添加一组卡片,JS部分也不复杂
<script>
function addEvent(elem, type, handler) {
elem.addEventListener(type, handler, false);
}
function qs(selector) {
return document.querySelector(selector);
}
function qsa(selectors) {
return document.querySelectorAll(selectors);
}
var mockData = ['内容1', '内容2', '内容3', '内容4', '内容5'];
addEvent(qs('.items-more-btn'), 'click', function() {
renderList(mockData);
});
var itemTpl = qs('#item-tpl').innerHTML;
var itemsDOM = qs('.items');
/**
* 渲染数据
* @param {[type]} data [description]
* @return {[type]} [description]
*/
function renderList(data) {
var data = data.map(function(val, index) {
return {
index: index + 1,
content: val
};
});
var html = '';
var fragment = document.createDocumentFragment();
data.forEach(function(item) {
var divTemp = document.createElement('div');
// 模板替换
divTemp.innerHTML = itemTpl.replace(/{{(\w+)}}/g, function(input, match) {
return match ? item[match] || '' : '';
});
fragment.appendChild(divTemp.firstElementChild);
});
// 渲染
itemsDOM.appendChild(fragment);
}
</script>
最后便是由CSS控制的部分了
每个卡片都有个类名 item__anim ,用以设置动画
动画展开时主要包含四种效果
由上到下的衔接效果:每个卡片自带一个类 item__anim-n ,用以设置延时,当然了,这里就需要引入scss来提高生产力了
往下掉的效果:使用 translate3d 控制y轴位移
渐显效果: 使用 opacity
放大效果:使用 scale
body {
background: #f2f2f2;
}
article {
margin-bottom: 100px;
width: 500px;
text-align: center;
}
.items {
width: 400px;
margin: 30px auto;
}
.items-more-btn {
margin-bottom: 20px;
}
@keyframes showBox {
to {
opacity: 1;
transform: scale(1) translate3d(0, 0, 0);
}
}
.item {
position: relative;
margin-top: 10px;
width: 100%;
height: 150px;
background: #fff;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
color: #666;
opacity: 0;
transform: scale(.9) translate3d(0, -10px, 0);
&:nth-child(odd) {
height: 200px;
}
h2 {
width: 100%;
font-size: 18px;
}
&.item__anim {
animation-name: showBox;
animation-duration: .4s;
animation-fill-mode: forwards;
}
&__anim-1 {
animation-duration: .6s;
}
@mixin showingDelay() {
@for $n from 1 through 30 {
&__anim-#{$n} {
animation-delay: #{(0.05 + $n / 10)}s;
}
}
}
@include showingDelay();
}