我正在寻找一种方法，以便当我从 p.title.class 中删除我的 center 类时，它可以顺利过渡到新的位置。 JSfiddle
这是我的 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");
});
});
最佳答案
如果您只需要使用 CSS 执行此操作，请参阅 this fiddle .
基本上，我将绝对位置移动到 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;
}
关于jquery - 具有平滑位置转换的绝对中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25059038/