html - CSS3 导航按钮动画

Question

我已经为我的导航按钮设置了动画，这些按钮在悬停时会展开，但它们会继续扰乱页面其余部分的流程。我试过使用 z-index 将它们从流程中移除，但这也不起作用。有没有一种方法可以做到这一点而无需按钮将所有东西都推开？到目前为止，这是我的相关代码:

.btn-group .button { 		
  background-color: teal; 		
  border: 2px solid orange; 		
  color: orange; 		
  padding: 2px 15px; 		
  text-align: center; 		
  text-decoration: none; 		
  display: inline-block; 		
  cursor: pointer; 		
  float: left; 		
  font-size: 1em; 		
  border-radius: 50%; 		
  margin: 5px 0 5px 5px; 		
  padding-left: 30px; 		
  position: relative;         
  z-index: 1; 		} 		
     
.btn-group .button:hover { 		
  background-color: cadetblue; 		} 		     

.button span { 		
  cursor: pointer; 		
  display: inline-block; 		
  position: relative; 		
  transition: 0.5s; 		}      

.button span:after { 		
  content: '\00bb'; 		
  opacity: 0; 		
  top: 0; 		
  right: -20px; 		
  transition: 0s; 		
  padding-left: 10px; 		}      

.button:hover span { 		
  padding: 10px; 		
  color: black; 		
  font-size: 1.5em; 		}      

.button:hover span:after { 		
  opacity: 1; 		
  right: 0; 		
  color: black; 		}

感谢您的帮助!

Answer 1

您必须将动画限制为不干扰文档流中对象的位置和尺寸的属性。

它们是:transform、left、right、bottom 和 top .对于最后 4 个，为了工作，您还需要在按钮上使用 position:relative。使用其中任何一种时，即使您看到元素在移动，它的位置也会保持在流中，就像它仍然在那里一样。只有它的投影图像被移动/转换。

转换 示例:

.button {
  margin: 1rem;
  transition : transform .3s cubic-bezier(.4,0,.2,1);
  display: inline-block;
  border: 1px solid black;
  padding: 1rem;
  
}
.button:hover {
  transform: scale(1.1);
}
.red {
  background-color: red;
  padding: 1rem;
  color: white;
}

<a class="button">Example with transform</a>

<div class="red">see? I'm not moving</div>

这就是绝大多数网络动画的完成方式(使用transform)。

---

作为替代方案，如果您真的想为通常会影响文档其余部分的属性设置动画，则需要从文档流中删除您的元素。为此，您需要:

• 将您的元素包装在所需尺寸的包装器(占位符)中(它永远不会移动并保持一切就位)，并给包装器 position:relative,
• 在按钮上设置position:absolute。

现在您可以为按钮上的任何内容设置动画，而不会影响文档的其余部分。
但请记住，包装器需要具有适当的尺寸，因为现在绝对定位的 button 将不再占据文档流中的任何空间。另外，请注意您的按钮现在是相对于其占位符的。如果占位符移动，按钮也会移动。

绝对定位和包装示例:

.wrapper {
  height: 5rem;
  position: relative;
}

.button {
  position: absolute;
  top: 1rem;
  padding: 1rem;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  border: 1px solid black;
}
.button:hover {
  top: .5rem;
  padding: 1.5rem;
}
.red {
  background-color: red;
  padding: 1rem;
  color: white;
}

<div class="wrapper">
  <a class="button">Example with absolute positioning and wrapping</a>
</div>

<div class="red">see? I'm not moving</div>

这是基础。

作为旁注，最佳实践要求您将动画限制在一个非常有选择和有限的束或属性中，这些束或属性不会影响浏览器性能:束由两个元素组成:

• 转换
• 和不透明度。

你为其他任何东西设置动画......砰!，你的滚动开始在资源有限的设备上错开。关于这个主题有很多东西可以阅读，但这里有一个 good one .