译文仅为团队内部分享，对外不对质量负责。
原文链接：Effect Ideas for Card Stacks（作者：Mary Lou）
本文尝试对常见的卡片抽取特效实现正（接受）与反（拒否）的交互。
点此查看范例：http://tympanus.net/Development/CardStackEffects/
期望结果：点击“接受”或“拒绝”按钮，使卡片垛最上层的元素产生相应的动画漂移。（译注：此处删除一句很抽象的前提解释，个人认为可读不可读。）
注意： 部分CSS仅被现代浏览器支持。
卡片与控制钮的代码结构如下：
<ul id="stack_yuda" class="stack stack--yuda">
<li class="stack__item"><img src="" alt="Tree 1" /></li>
<li class="stack__item"><img src="" alt="Tree 2" /></li>
<li class="stack__item"><img src="" alt="Tree 3" /></li>
<li class="stack__item"><img src="" alt="Tree 4" /></li>
<li class="stack__item"><img src="" alt="Tree 5" /></li>
<li class="stack__item"><img src="" alt="Tree 6" /></li>
</ul>
<div class="controls">
<button class="button button--sonar button--reject" data-stack="stack_yuda">
<i class="fa fa-times"></i>
<span class="text-hidden">Reject</span>
</button>
<button class="button button--sonar button--accept" data-stack="stack_yuda">
<i class="fa fa-check"></i>
<span class="text-hidden">Accept</span>
</button>
</div>
卡片元素以绝对定位层层覆叠，通过点击按钮对卡片添加accept或reject的class来实现效果。
以下demo使用了一个小插件来辅助功能，Michael Villar写的dynamics.js。移除卡片的动画效果完全依赖CSS。插件内置以下参数：
（注：perspective参考）
Stack.prototype.options = {
// 默认透视结束点位置（Z轴）
perspective: 1000,
// 透视点偏移（X/Y轴）（译注：当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身）
perspectiveOrigin : '50% -50%',
// 默认可见卡片数
visible : 3,
// infinite navigation
infinite : true,
// 到达卡片垛末尾时执行的callback
onEndStack : function() {return false;},
// dynamics.js动画参数，具体请参考官方说明 http://dynamicsjs.com/
// 例:
// {type: dynamics.spring,duration: 1641,frequency: 557,friction: 459,anticipationSize: 206,anticipationStrength: 392}
stackItemsAnimation : {
duration : 500,
type : dynamics.bezier,
points : [{'x':0,'y':0,'cp':[{'x':0.25,'y':0.1}]},{'x':1,'y':1,'cp':[{'x':0.25,'y':1}]}]
},
// 元素重排延迟值（即stackItemsAnimation作用前的停顿）
stackItemsAnimationDelay : 0,
// 元素重排视觉效果设置（接纳+拒否）
stackItemsPreAnimation : {
reject : {
// 是否弹性：如果为真，settings.properties的参数将会以非均等的方式分配到元素上
// 例：当默认X轴偏移为一百 settings.properties = {translateX:100} ，而默认可视个数 options.visible = 4,
// 则元素获得的分配值依次为 100px - 75px - 50px
elastic : true,
// dynamics.js 动画函数第2设置值（具体参考 http://dynamicsjs.com/）
animationProperties : {},
// dynamics.js 动画函数第3设置值（具体参考 http://dynamicsjs.com/）
animationSettings : {}
},
accept : {
/ 是否弹性：如果为真，settings.properties的参数将会以非均等的方式分配到元素上
// 例：当默认X轴偏移为一百 settings.properties = {translateX:100} ，而默认可视个数 options.visible = 4,
// 则元素获得的分配值依次为 100px - 75px - 50px
elastic : true,
// dynamics.js 动画函数第2设置值（具体参考 http://dynamicsjs.com/）
animationProperties : {},
// dynamics.js 动画函数第3设置值（具体参考 http://dynamicsjs.com/）
animationSettings : {}
}
}
}
相应的动画样式：
/***********************************************/
/******************** yuda *********************/
/***********************************************/
.stack--yuda .stack__item--reject {
-webkit-animation: yudaReject 0.5s forwards;
animation: yudaReject 0.5s forwards;
}
@-webkit-keyframes yudaReject {
to {
opacity: 0;
-webkit-transform: translate3d(0, 200px, 0);
transform: translate3d(0, 200px, 0);
}
}
@keyframes yudaReject {
to {
opacity: 0;
-webkit-transform: translate3d(0, 200px, 0);
transform: translate3d(0, 200px, 0);
}
}
.stack--yuda .stack__item--accept {
-webkit-transform-origin: 50% 300%;
transform-origin: 50% 300%;
-webkit-animation: yudaAccept 0.5s forwards;
animation: yudaAccept 0.5s forwards;
}
@-webkit-keyframes yudaAccept {
to {
opacity: 0;
-webkit-transform: rotate3d(0, 0, 1, 20deg);
transform: rotate3d(0, 0, 1, 20deg);
}
}
@keyframes yudaAccept {
to {
opacity: 0;
-webkit-transform: rotate3d(0, 0, 1, 20deg);
transform: rotate3d(0, 0, 1, 20deg);
}
}
例中所用树木矢量图来自Freepik：http://www.freepik.com/free-photos-vectors/tree
Demo：http://tympanus.net/Development/CardStackEffects/
代码包：http://tympanus.net/Development/CardStackEffects/CardStackEffects.zip
网友评论