这是一款非常时尚的移动手机Material Design风格信息卡片UI设计效果。该卡片设计效果中所有的卡片在点击或触摸之后，会以平滑过渡动画全屏展开。整个设计以扁平风格为主，非常时尚。
使用方法
HTML结构
该卡片UI的HTML结构分为2个部分。div.card__full是全屏的卡片，div.card__list是卡片列表。
9
Tony
Romo
1st
......
CSS样式
当一张卡片被点击之后，它首先会移动到屏幕的中间。这通过jQuery代码的moveCard()方法来完成。当这个动画结束的时候，div.card__full会被添加一个.activeclass，默认情况下，div.card__full是fixed定位，并通过transform: scaleY(0)将其隐藏。在添加了.activeclass之后，使用transform: scaleY(1)将它恢复，实现展开效果。
.card__full {
will-change: transform;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
position: fixed;
top: 50%;
left: 50%;
width: 384px;
height: 640px;
z-index: 2;
visibility: hidden;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform: scaleY(0) translate(-50%, -50%);
transform: scaleY(0) translate(-50%, -50%);
-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.card__full.active {
visibility: visible;
-webkit-transform: scaleY(1) translate(-50%, -50%);
transform: scaleY(1) translate(-50%, -50%);
}
.card__full.active .card__full-num,
.card__full.active .card__full-handle,
.card__full.active .card__full-info {
opacity: 1;
}
Javascript
为了计算卡片移动到屏幕中间的距离，这里使用使用w.innerHeight()/2 - selfO.top -4来得到要移动的距离，然后使用translateY()函数来移动它。然后在动画结束的时候，为div.card__full添加.active class，使其全屏展开。
var moveCard = function() {
var self = $(this);
var selfIndex = self.index();
var selfO = self.offset();
var ty = w.innerHeight()/2 - selfO.top -4;
var color = self.css('border-top-color');
cardfulltop.css('background-color', color);
cardhandle.css('color', color);
updateData(selfIndex);
self.css({
'transform': 'translateY(' + ty + 'px)'
});
self.on('transitionend', function() {
cardfull.addClass('active');
self.off('transitionend');
});
return false;
};
完整的CSS和JS代码请参考下载文件。
如果觉得《移动端html模板卡片列表效果 移动手机Material Design风格信息卡片UI设计》对你有帮助，请点赞、收藏，并留下你的观点哦！
