翻转卡不会在第二个动画上保持后部div

Question

我有一张卡片，其中包含以下动画：当您点击“编辑”按钮时：

它移动到屏幕的中心
移动时旋转180度（背面内容不同 - 空白）

在它到达div的中心并完成旋转后，卡会扩展到全屏（之后我重定向用户）。我的问题是，在第二个动画之后（实际上当完成所有动画时）只有后面的内容是可见的，在休息时，当它进行旋转和翻译时，它只是前面的内容翻转可见（请参阅JSFIDDLE向下）我的代码看起来喜欢：

html：

<div class="cards-holder">
    <div class="card bg-light mb-3 item" style="display: none">
        <div class="front face">
        <div class="card-header kid-card-header">
            <div class="kid-card-header-name">
                <label>Child name:&nbsp;</label>
                <label>Kevin </label>
            </div>
            <div class="kid-card-header-delete-button">
                <i class="fa fa-trash-o deleteChild" aria-hidden="true" style="cursor: pointer" idOfChild="23"></i>
            </div>
        </div>
        <div class="card-body">
            <div class="kid-card-content">
                <div class="kid-card-content-image">
                    //some image
                </div>
                <div class="kid-card-content-description">
                    <p class="card-text">
                        <label>Age: </label>
                        <label>2 years</label>
                    </p>
                    <p class="card-text">
                        <label>Gender: </label>
                        <label>Male</label>
                    </p>
                    <p class="card-text">
                        <label>Height: </label>
                        <label>50 cm</label>
                    </p>
                    <p class="card-text">
                        <label>Weight: </label>
                        <label>25 kg</label>
                    </p>
                </div>
                </div>
            </div>
            <div class="card-footer kid-card-footer">
                <button class="btn btn-secondary editChildButton" ChildId="23">Edit</button>
            </div>
        </div>
        <div class="back face">
        </div>
    </div>
</div>

CSS：

.card {
    transform-style: preserve-3d;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

    .face.back {
        display: block;
        transform: rotateY(180deg);
        background-color: #78C2AD;
    }

和JS：

$.fn.toggleZindex= function() {
    const $this = $(this);
    if($this.css("z-index")=="auto") {
        $this.css("z-index", "99999");
    }else {
        $this.css("z-index", "auto");
    }

    return this;
};

$.fn.animateRotate = function(angle, duration, easing, startingDegree, complete) {
    var args = $.speed(duration, easing, complete);
    var step = args.step;
    return this.each(function(i, e) {
        args.complete = $.proxy(args.complete, e);
        args.step = function(now) {
            $.style(e, 'transform', 'rotateY(' + now + 'deg)');
            if (step) return step.apply(e, arguments);
        };

        $({ deg: startingDegree}).animate({deg: angle}, args);
    });
};

function getRotationDegrees(obj) {
    const matrix = obj.css("-webkit-transform") ||
        obj.css("-moz-transform")    ||
        obj.css("-ms-transform")     ||
        obj.css("-o-transform")      ||
        obj.css("transform");
    if(matrix !== 'none') {
        const values = matrix.split('(')[1].split(')')[0].split(',');
        const a = values[0];
        const b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle + 360 : angle;
}

$('.editChildButton').on('click',
    function () {
        const idOfChild = $(this).attr('ChildId');
        const tc = $(window).height() / 2 - $('.item').height() / 2 - $(this.closest('.item')).offset().top;
        const lc = $(window).width() / 2 - $('.item').width() / 2 - $(this.closest('.item')).offset().left;

        $(this.closest('.item')).toggleZindex();

        const startingDegree = getRotationDegrees($(this.closest('.item')));

        $(this.closest('.item')).animateRotate(startingDegree == 0 ? 180 : 0, 2000, 'swing', startingDegree);

        $(this.closest('.item')).animate({
            left: lc,
            top: tc
        }, 2000, function () {
            $(this.closest('.item'))
                .css({
                    position: 'fixed', left: $(this.closest('.item')).offset().left, top:
                        $(this.closest('.item')).offset().top
                });
            $(this.closest('.item')).animate({
                left: 0,
                top: 0,
                width: '100vw',
                height: '100vh'
            }, 2000, function() {
                window.location =
                    "/Children/EditChild?childId=" + idOfChild;
            });
        });
    });

演示我的问题JSFIDDLE

基本上，我实际需要的是，从卡片旋转180度（从第一个动画）开始，在进行第二个动画时，只有空白的绿色背面可见。此外，在所有这些结束时，我需要重定向到另一个页面，所以我需要知道什么时候完成。

我更新了JDFIDDLE以显示我卡的实际位置。