jquery为表格行添加上下移动画效果

Posted 2021-01-18 skura23

为项目列表项添加上下移动动画。首先想使用jquery animate来做到这一点。
但我用的是table和tr作为列表和列表项，但jquery动画方法不支持table里的tr（Animations are not supported on table rows.）。
所以设法用其他解决方案。最后使用jq方法配合 CSS3 transform 实现。

/**
 * @param  {Object} $fstElem 目标行
 * @param  {Object} $scdElem 被换行
 * @param  {Number} dirflag 移动方向 flag, 2 是上移, 1 是下移.
 * @param  {Function} cb 回调
 */
function animatedMove($fstElem, $scdElem, dirflag, cb) {
    var fstdir, scddir;
    // move up
    if (dirflag == 2) {
        fstdir = ‘-‘;
        scddir = ‘‘;
    } else if(dirflag == 1){
    // move down
        fstdir = ‘‘;
        scddir = ‘-‘;
    }
    // add animations
    $fstElem.css({
        transform: ‘translateY(‘+fstdir+$scdElem.height()+‘px)‘,
        transition: ‘transform 0.4s‘
    })
    $scdElem.css({
        transform: ‘translateY(‘+scddir+$fstElem.height()+‘px)‘,
        transition: ‘transform 0.4s‘
    })
    // 重置css3样式; 触发回调函数
    setTimeout(function(){
        $fstElem.css({
            transform: ‘none‘,
            transition: ‘unset‘
        })
        $scdElem.css({
            transform: ‘none‘,
            transition: ‘unset‘
        })
        if (dirflag == 2) {
            $fstElem.after($scdElem)
        } else if(dirflag == 1){
            $fstElem.before($scdElem)
        }
        cb && cb()
    }, 400)
}

jsfiddle: DEMO