绝对中心，位置平滑过渡

debugcn 发表于 Dev

赛亚人烤面包机

我正在寻找一种实现方法，以便当我从center班级中删除班级时p.title.class，它可以平稳地过渡到新位置。JS小提琴

以下是我的HTML的摘要：

<body>
    <div class="wrapper-top">
        <div>
            <ul>
                <li class="left"><a href="#">Help</a></li>
                <li class="right">
                    <a href="#">Login</a> 
                    <a href="#">Register</a>
                </li>
            </ul>
        </div>
        <p class="title center">LoLNode</p>
    </div>
</body>

这是我的CSS的摘要：

.wrapper-top {
    min-height:100%;
    overflow:auto;
    background: -webkit-linear-gradient(#3498db, #2980b9);
    background: -o-linear-gradient(#3498db, #2980b9);
    background: -moz-linear-gradient(#3498db, #2980b9);
    background: linear-gradient(#3498db, #2980b9);
    /*background-image:url(./assets/bg_1.jpg);
    background-position:bottom;
    background-repeat:no-repeat;
    background-size:cover;*/
}
    .wrapper-top div:first-child {
        padding:5px;
        background:url(./assets/horizontal_line.png) bottom repeat-x;
        z-index:100;
    }
        .wrapper-top div:first-child ul {
            width:50%;
            overflow:auto;
            margin:auto auto;
            list-style-type:none;
        }
            .wrapper-top div:first-child ul li {
                overflow:auto;
                display:inline-block;
                color:#FFF;
                text-shadow:0px 1px 1px #000;
            }
        .wrapper-top p.title {
            font-size:60px;
            font-family:"Alegrey Thin", Helvetica, sans-serif;
            color:#FFF;
            text-shadow:0px 2px 1px #000;
            text-align:center;

        }
        .wrapper-top p.title.center {
            width:220px;
            height:60px;
            position:absolute;
            top:0;bottom:0;
            left:0;right:0;
            margin:auto auto;   
        }

这是我的jQuery的摘要：

$(document).ready(function() {
    $("p.title.center").click(function() {
        $("p.title.center").removeClass("center");
    });
});

JS小提琴

弗拉德·卡扎库（Vlad Cazacu）

如果仅需要使用CSS进行此操作，请参阅此小提琴。

基本上，我将绝对位置移动到了p.title规则，并添加了CSS3过渡，所以现在看起来像这样：

.wrapper-top p.title {
            font-size:60px;
            font-family:"Alegrey Thin", Helvetica, sans-serif;
            color:#FFF;
            text-shadow:0px 2px 1px #000;
            text-align:center;
            width:220px;
            height:60px;
            position:absolute;
            top:10px;
            left: 50%;
            margin-left: -110px;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
        .wrapper-top p.title.center {
            top: 50%;
            margin-top: -30px;
        }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。