javascript - 翻转的卡片不会在第二个动画中保留后部 div

Question

我有一张具有以下动画的卡片:当您点击“编辑”按钮时:

• 移动到屏幕中央
• 移动时旋转 180 度(具有不同的背面内容 - 空白绿色)

到达 div 的中心并完成旋转后，卡片会扩展到全屏(之后我会重定向用户)。 我的问题是，在第二个动画之后(实际上是在所有动画都完成时)，只有后面的内容才可见，在静止状态下，当它进行旋转和平移时，只有前面的内容翻转可见(参见 JSFIDDLE down) 我的代码如下所示:

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 以显示卡片的实际位置。

Answer 1

您可以通过将 JS 动画替换为 CSS 动画来解决此问题(并节省大量性能)。

引用这个: https://jsfiddle.net/g9wb4rwp/

$('.editChildButton').on('click',  function () {       
    $('.flip-container').addClass('flip');       
});

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}

.flip-container.flip .flipper {
    transform: rotateY(180deg);
}

.front, .back {
	width: 100%;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
    background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="flip-container">
	<div class="flipper">
		<div class="front">
		<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">
          </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">
			Back
		</div>
	</div>
</div>

获取CSS动画的结尾:

myselector.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  { 
    // code to execute after transition ends  
});