У меня есть карта со следующей анимацией:
При нажатии на кнопку «Редактировать»:
- перемещается в центр экрана
- при перемещении вращается на 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: </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, чтобы показать фактическое расположение моих карт.