使用CSS Transition动画边距和填充会导致跳动动画 [英] Animating margins and padding with CSS Transition causes jumpy animation

问题描述

在我的个人网站上，我正在使用顶部导航栏上的CSS3 Transition属性来设置边距和填充带边框的元素，以使边框在悬停时膨胀。

At my personal website, I'm using the CSS3 Transition property on the top nav to animate the margins and padding of an element with a border, to make the border swell on hover.

相关标记：

<nav>
        <a class="email" href="mailto:notmyrealemailaddress">
          <div class="icon-border">
            <img src="images/mail_icon.png" width="14" height="12">
          </div>Email Me</a>

        <a class="phone" href="tel:[phone]">
          <div class="icon-border">
            <img src="images/phone_icon.png" width="11" height="18">
          </div>Call Me</a>

        <a class="behance" href="http://behance.net/dannymcgee" target="_blank">
          <div class="icon-border">
            <img src="images/behance_icon.png" width="21" height="13">
          </div>See My Work</a>
</nav>

CSS：

header nav .icon-border {
  display: inline-block;
  border: 2px solid #000;
  border-radius: 30px;
  padding: 5px;
  margin: 0 10px;
  transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;
}

header nav a:hover .icon-border {
  padding: 10px;
  margin: -10px 5px;
  border: 2px solid #ddd;
  transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;
}

看看它在做什么？通过减少边距并增加悬停时的填充，圆形边框有效地变大，而不会改变它缠绕的图像的位置。

See what it's doing? By decreasing the margins and increasing the padding on hover, the circular border effectively gets bigger without altering the position of the image it's wrapped around.

它工作得很好，但是问题是，如果我快速将鼠标从EMAIL ME移动到CALL ME，反之亦然，在第一个动画完成之前，整个导航上下大约一个像素。但是，这个问题在CALL ME和SEE MY WORK之间不会发生，这让我相信这是一个可以解决的问题。任何想法？

It works pretty well, but the problem is that if I quickly move the mouse from EMAIL ME to CALL ME and vice versa, before the first animation completes, the whole nav "jumps" up and down by about a pixel. However, this issue doesn't happen between CALL ME and SEE MY WORK, which leads me to believe it's an issue that can be fixed. Any ideas?

推荐答案

我认为这个问题是因为你正在转换边距（并使用负边距，总是有点不稳定）。

I believe the issue is because you are transitioning the margins (and using negative margins which is always a little wonky).

更顺畅的解决方案可能是使用转换：scale（x）

A smoother solution might be using transform: scale(x)

有些像：

header nav .icon-border {
  display: inline-block;
  border: 2px solid #000;
  border-radius: 30px;
  padding: 5px;
  margin: 0 10px;
  transform: scale(1); /* you need a scale here to allow it to transition in both directions */
  transition: 0.15s all ease;
}

header nav a:hover .icon-border {
  transform: scale(1.2);
  border: 2px solid #ddd;
}

这篇关于使用CSS Transition动画边距和填充会导致跳动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！