Fatal编程技术网
  • javascript/
  • Javascript 动画引导4卡到屏幕中心

Javascript 动画引导4卡到屏幕中心

javascript jquery html css bootstrap-4

Javascript 动画引导4卡到屏幕中心,javascript,jquery,html,css,bootstrap-4,Javascript,Jquery,Html,Css,Bootstrap 4,我试图获得以下效果： 将几个bootstrap 4卡显示为网格 当从卡片内部单击按钮时，它应设置动画，如下所示： 旋转180度，达到特定的高度/宽度（从400px-350px到整个屏幕），并将自身定位在屏幕中心 现在，我知道如何使用 rotateY(180deg) 当我单击按钮时： $('#enlarge').on('click', function() { $('#kidCard').toggleClass("flipper"); }); 在flippe

我试图获得以下效果：

  • 将几个
    bootstrap 4
    卡显示为网格
  • 当从卡片内部单击
    按钮时，它应
    设置动画，如下所示：
旋转180度，达到特定的高度/宽度（从400px-350px到整个屏幕），并将自身定位在屏幕中心
现在，我知道如何使用

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>
现在，这是我的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);
                });
            });

$.fn.toggleZindex=function（）{
const$this=$（this）；
if（$this.css（“z-index”）=“auto”）{
$this.css（“z-index”，“99999”）；
}否则{
$this.css（“z-index”，“auto”）；
}
归还这个；
};
$.fn.animateRotate=函数（角度、持续时间、缓和、开始度、完成）{
变量args=$.speed（持续时间、缓解、完成）；
var step=args.step；
返回此。每个（函数（即）{
args.complete=$.proxy（args.complete，e）；
args.step=函数（现在）{
$.style（e，'变换'，'旋转（'+now+'deg'）；
if（step）返回step.apply（e，参数）；
};
$（{deg:startingDegree}）。设置动画（{deg:angle}，args）；
});
};
函数getRotationDegrees（obj）{
常量矩阵=obj.css（“-webkit转换”）||
css（“-moz转换”）||
对象css（“-ms转换”）||
对象css（“-o-transform”）||
对象css（“转换”）；
如果（矩阵！=“无”）{
常量值=矩阵。拆分（“（”）[1]。拆分（“）”）[0]。拆分（“，”）；
常数a=值[0]；
常数b=值[1]；
变量角度=数学圆（数学atan2（b，a）*（180/数学PI））；
}else{var angle=0；}
返回（角度<0）？角度+360：角度；
}
$（'.editChildButton'）。在（'单击'），
函数（）{
const idOfChild=$（this.attr（'ChildId'）；
const tc=$（window.height（）/2-$（'.item'）.height（）/2-$（this.closest（'.item'））.offset（）.top；
常量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:02000，“swing”，startingDegree）；
$（this.closest（'.item'））.animate({
左:立法会,，
顶部：tc
}，2000，函数（）{
$（this.closest（'.item'））.css（{position:'fixed'，left:$（this.closest（'.item'）））.offset（）.left，top:$（this.closest（'.item'））.offset（）.top}）；
$（this.closest（'.item'））.animate({
左:0,，
排名：0，
宽度：“100vw”，
高度：“100vh”
},2000);
});
});
一种可能的方法是在flipper类上设置
宽度，然后将页边距设置为“自动”。设置
width
值和
margin:auto
将使块级元素居中


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

.flipper {
    transition: 2s;
    margin: auto;
    width:400px;
    height:400px;
    transform-style: preserve-3d;
    position: relative;
}




或者，如果您更喜欢flex box解决方案，类似的解决方案也可以：


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

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

.body-flipper {
  display:flex;
  justify-content: center;
}

body, html{
  width:100% !important;
  height: 100% !important;
  margin:0;
}



我不知道您的具体情况，但如果您能找到一种使用
位置：绝对
的方法，那么在移动卡片时就会容易得多

当在屏幕中央放置一个div时，重要的是要知道在转换时元素的宽度和高度。如果您的用例允许您手动设置这些维度，则您可以使用：


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


但如果您无法手动设置它们，则需要找到替代机制。老实说，我在这里提出的变体是使用的（这就是为什么很可能有其他更简单的解决方案），这有助于我开始使用它们

我对代码进行了注释以解释程序

嗨



//设置这些变量以在css中使用它们
$（'kidCard'）[0].style.setProperty（'--width'，$（'kidCard'）.width（）+'px'）；
$（'kidCard'）[0].style.setProperty（'-height'，$（'kidCard'）.height（）+'px'）；
$（'放大'）。在（'点击'），
函数（）{
$（“#kidCard”）.toggleClass（“flipper”）；
$（'body'）.toggleClass（“shady”）；
});

正文{
过渡：1s；
}
身体阴暗{
背景：rgba（0,0,0,8）；
}
.翻转容器.卡片{
左侧：0；/*手动设置每张卡片的左侧和顶部，以便翻译顺利进行*/
top:0；/*如果在网格中有它们，则可以使用i和j来执行此操作*/
文本对齐：居中；
边框：1px纯红；
过渡：1s；
位置：绝对位置；
背景：白色；
}
.翻转容器.卡片.翻转器{
变换：旋转（360度）；
左：计算（50%-var（--width）/2）；/*使用js中设置的变量*/
顶部：计算值（50%-变量（--高度）/2）；
}



子名称：。。。


年龄：。。。




性别：。。。




身高：。。

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



<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>



.flip-container {
  width: 400px;
}

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

.card {
  transition-duration: 2s;
}

.movement {
  transform: translate(-50%,-50%) rotateY(180deg);
}



var element = $('#kidCard');
var w = element.width();
var h = element.height();

$('#enlarge').on('click',
  function() {
    if(element.hasClass('movement')) {
      element.removeClass('movement');
      element.css({width: w, height: h, top: 0, left: 0});
    } else {
      var left = element.offset().left;
      var top = element.offset().top;
      element.css({position: 'fixed', left: left, top: top, width: w, height: h});
      element.addClass('movement');
      element.css({width: '100vw', height: '100vh', top: '50%', left: '50%'});
   }
});