javascript - 将 Bootstrap 4 卡片动画到屏幕中央

Question

我正在尝试获得以下效果:

• 将一些 bootstrap 4 卡片显示为网格
• 当从卡片中点击一个按钮时，它应该动画如下: 旋转 180 度，达到特定的高度/宽度(从 400 像素到 350 像素到整个屏幕)并将其自身定位在屏幕中央。

现在，我知道如何获得旋转

rotateY(180deg)

当我点击一个按钮时:

$('#enlarge').on('click',
    function() {
        $('#kidCard').toggleClass("flipper");
    });

在 flipper 类中设置了旋转，但我无法获得所需动画的其余部分。 有人可以帮我解决这个问题吗？

更新:

我当前的 html:

<div class="flip-container">
    <div class="card text-white bg-primary mb-3 kid-card" id="kidCard">
        <div class="card-header">
            Child name: ...
            <i class="fa fa-trash-o" aria-hidden="true" style="cursor: pointer"></i>
        </div>
        <div class="card-body kid-card-content">
            <div class="kid-card-content-image">
                <img src="~/Content/download.png" width="110" height="110"/>
            </div>
            <div class="kid-card-content-description">
                <p class="card-text">
                    Age: ...
                </p>
                <p class="card-text">
                    Gender: ...
                </p>
                <p class="card-text">
                    Height: ...
                </p>
                <p class="card-text">
                    Weight: ...
                </p>
            </div>
        </div>
        <div class="card-footer">
            <button class="btn btn-secondary" id="enlarge">Edit</button>
        </div>
    </div>
</div>

有js文件:

$('#enlarge').on('click',
    function() {
        $('#kidCard').toggleClass("flipper");
    });

现在，这是我的 CSS 文件:

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

.flipper {
    transition: 2s;
    transform-style: preserve-3d;
    position: relative;
}

在转换中，我还尝试了 translateY(calc(50vh - 50%)) translateX(calc(50vh - 50%)) 以便将其定位在屏幕中央，但它不起作用。

解决方案:

我终于用下面的代码让它工作了(感谢大家的贡献):

.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);
                });
            });

Answer 1

我不知道你的具体情况，但如果你能找到一种使用 position: absolute 的方法，那么移动卡片时就会容易得多。

将 div 放置在屏幕中央时，重要的是要知道元素在转换时的宽度和高度。如果您的用例允许您手动设置这些维度，那么您就设置好了，您只需使用:

left: calc(50% - manuallySetWidth);
top: calc(50% - manuallySetHeight);

但是如果您不能手动设置它们，那么您需要寻找替代机制。老实说，我在这里提出的变体是使用 a somewhat new addition to CSS 的东西(这就是为什么很可能有其他更简单的解决方案)和 here is apost这帮助我开始了这些。

我注释了代码以解释程序

高

//set these vars to use them in css
$('#kidCard')[0].style.setProperty('--width', $('#kidCard').width()+'px');
$('#kidCard')[0].style.setProperty('--height', $('#kidCard').height()+'px');

$('#enlarge').on('click',
  function() {
    $('#kidCard').toggleClass("flipper");
    $('body').toggleClass("shady");
});

body{
  transition: 1s;
}

body.shady{
  background: rgba(0,0,0,.8);
  
}

.flip-container .card {
  left: 0;/*manually set each card's left and top in order for the translation to work smoothly, */
  top: 0;/*if you have them in a grid you could use i and j to do this */
  text-align: center;
  border: 1px solid red;
  transition: 1s;
  position: absolute;
  background: white;
}

.flip-container .card.flipper {
  transform: rotateY(360deg);
  left: calc(50% - var(--width)/2); /*use the variables set in js*/
  top: calc(50% - var(--height)/2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip-container">
			<div class="card text-white bg-primary mb-3 kid-card" id="kidCard">
				<div class="card-header">
					Child name: ...
					<i class="fa fa-trash-o" aria-hidden="true" style="cursor: pointer"></i>
				</div>
				<div class="card-body kid-card-content">
					<div class="kid-card-content-image">
						<img src="~/Content/download.png" width="110" height="110"/>
					</div>
					<div class="kid-card-content-description">
						<p class="card-text">
							Age: ...
						</p>
						<p class="card-text">
							Gender: ...
						</p>
						<p class="card-text">
							Height: ...
						</p>
						<p class="card-text">
							Weight: ...
						</p>
					</div>
				</div>
				<div class="card-footer">
					<button class="btn btn-secondary" id="enlarge">Edit</button>
				</div>
			</div>
		</div>