譯文僅為團(tuán)隊內(nèi)部分享，對外不對質(zhì)量負(fù)責(zé)。

原文鏈接：Effect Ideas for Card Stacks（作者：Mary Lou）

本文嘗試對常見的卡片抽取特效實(shí)現(xiàn)正（接受）與反（拒否）的交互。

點(diǎn)此查看范例：http://tympanus.net/Development/CardStackEffects/

期望結(jié)果：點(diǎn)擊“接受”或“拒絕”按鈕，使卡片垛最上層的元素產(chǎn)生相應(yīng)的動畫漂移。（譯注：此處刪除一句很抽象的前提解釋，個人認(rèn)為可讀不可讀。）

注意： 部分CSS僅被現(xiàn)代瀏覽器支持。

卡片與控制鈕的代碼結(jié)構(gòu)如下：

<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>

卡片元素以絕對定位層層覆疊，通過點(diǎn)擊按鈕對卡片添加accept或reject的class來實(shí)現(xiàn)效果。

以下demo使用了一個小插件來輔助功能，Michael Villar寫的dynamics.js。移除卡片的動畫效果完全依賴CSS。插件內(nèi)置以下參數(shù)：

（注：perspective參考）

Stack.prototype.options = {
    // 默認(rèn)透視結(jié)束點(diǎn)位置（Z軸）
    perspective: 1000,

    // 透視點(diǎn)偏移（X/Y軸）（譯注：當(dāng)為元素定義 perspective-origin 屬性時，其子元素會獲得透視效果，而不是元素本身）
    perspectiveOrigin : '50% -50%',

    // 默認(rèn)可見卡片數(shù)
    visible : 3,

    // infinite navigation
    infinite : true,

    // 到達(dá)卡片垛末尾時執(zhí)行的callback
    onEndStack : function() {return false;},

    // dynamics.js動畫參數(shù)，具體請參考官方說明 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,

    // 元素重排視覺效果設(shè)置（接納+拒否）
    stackItemsPreAnimation : {
        reject : {
            // 是否彈性：如果為真，settings.properties的參數(shù)將會以非均等的方式分配到元素上
            // 例：當(dāng)默認(rèn)X軸偏移為一百 settings.properties = {translateX:100} ，而默認(rèn)可視個數(shù) options.visible = 4, 
            // 則元素獲得的分配值依次為 100px - 75px - 50px
            elastic : true,
            // dynamics.js 動畫函數(shù)第2設(shè)置值（具體參考 http://dynamicsjs.com/）
            animationProperties : {},
            // dynamics.js 動畫函數(shù)第3設(shè)置值（具體參考 http://dynamicsjs.com/）
            animationSettings : {} 
        },
        accept : {
            / 是否彈性：如果為真，settings.properties的參數(shù)將會以非均等的方式分配到元素上
            // 例：當(dāng)默認(rèn)X軸偏移為一百 settings.properties = {translateX:100} ，而默認(rèn)可視個數(shù) options.visible = 4, 
            // 則元素獲得的分配值依次為 100px - 75px - 50px
            elastic : true,
            // dynamics.js 動畫函數(shù)第2設(shè)置值（具體參考 http://dynamicsjs.com/）
            animationProperties : {},
            // dynamics.js 動畫函數(shù)第3設(shè)置值（具體參考 http://dynamicsjs.com/）
            animationSettings : {}
        }
    }
}

相應(yīng)的動畫樣式：

/***********************************************/
/******************** 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