如何使用 CSS 过渡让 Div 平滑向上移动？ [复制]
Posted
技术标签:
【中文标题】如何使用 CSS 过渡让 Div 平滑向上移动？ [复制]【英文标题】：How to Get A Div to Smoothly Move Up Using CSS Transitions? [duplicate] 【发布时间】：2015-10-10 07:47:21 【问题描述】：标题有点描述它。代码如下：
#main
float: left;
width: 20%;
height: 10vh;
margin-top: 10vh;
margin-left: 40%;
text-align: center;
#k
font-family: Questrial;
font-size: 70px;
margin-top: -7px;
margin-left: -2px;
color: #404040;
border-bottom: 2px solid #404040;
line-height: 0.85;
#about
float: left;
clear: both;
width: 38%;
height: 30vh;
margin-top: 7vh;
margin-left: 31%;
text-align: center;
background-color: #33CC33;
border-radius: 100%;
opacity: 0.6;
transition: opacity .5s;
-webkit-transition: opacity .5s;
transition: margin-top .5s;
-webkit-transition: margin-top .5s;
transition: margin-bottom .5s;
-webkit-transition: margin-bottom .5s;
#about:hover
opacity: 0.8;
margin-top: 5vh;
margin-bottom: 2vh;
#work
float: left;
width: 38%;
height: 30vh;
margin-top: 0vh;
margin-left: 10%;
text-align: center;
background-color: #323280;
border-radius: 100%;
opacity: 0.6;
transition: opacity .5s;
-webkit-transition: opacity .5s;
#work:hover
opacity: 0.8;
#contact
float: right;
width: 38%;
height: 30vh;
margin-top: 0vh;
margin-right: 10%;
text-align: center;
background-color: #FF6600;
border-radius: 100%;
opacity: 0.6;
transition: opacity .5s;
-webkit-transition: opacity .5s;
#contact:hover
opacity: 0.8;
.label
font-family: Questrial;
color: white;
font-size: 35px;
margin-top: 80px;
<!DOCTYPE html>
<html>
<head>
<title>KURB - Home</title>
<link rel="stylesheet" type="text/css" href="kurb.css"/>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="main">
<p id="k">KURB</p>
</div>
<div id="about">
<p class="label">Blah blah blah</p>
</div>
<div id="work">
<p class="label">Blah blah blah blah blah</p>
</div>
<div id="contact">
<p class="label">Blah blah blah blah</p>
</div>
<script type="text/javascript">
</script>
</body>
</html>基本上，当鼠标悬停时，我想要做的是让顶部 div (#about) 比下两个高出大约 2 vh。正如你所看到的，我已经明白了，但它并没有做一个真正的动画——它会立即升起。此外，鼠标悬停时应该有颜色过渡 - 它应该变得不那么透明。这适用于其他人，但不适用于这个。
当你去掉 margin-top 和 margin-bottom 中的破折号时，它会变得非常有趣。然后，不是底部的两个慢慢向下移动，而是全部卡入到位。这就是我要找的，只有动画。我不知道是怎么回事。我在这里缺少什么吗？
【问题讨论】：
我认为，您的转换必须符合单一规则：transition: opacity .5s, margin-top .5s, margin-bottom .5s;。相反，您只用最后一个规则覆盖了以前的规则。尝试合并它们。
徐福知道了。谢谢！
【参考方案1】：
如果你想应用多个transitions，你不能只写多个规则，因为在 CSS 中最后一条规则会覆盖之前的所有规则。
将它们分别合并为一个规则：
transition: opacity .5s, margin-top .5s, margin-bottom .5s;
-webkit-transition: opacity .5s, margin-top .5s, margin-bottom .5s;
这是MDN article about using multiple transitions。
【讨论】：
【参考方案2】：你的意思是这样的吗？小提琴：https://jsfiddle.net/99464tyx/2/
如果是这样，只需将所有转换替换为 transition: all .5s;
【讨论】：
以上是关于如何使用 CSS 过渡让 Div 平滑向上移动？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
在向上和向下滚动时，使.removeClass（）和.addClass（）平滑过渡