CSS 边框过渡添加不需要的额外像素

Question

我正在为我的电子应用程序设计按钮样式 (HTML, SASS)。悬停时，此按钮将添加 10px 的 border-top 和 border-bottom，然后将其高度调整 -20 以取消额外的边框高度。我有过渡工作 almost 完美除了当一个小边框（看起来小于 1px）被添加到每个边框（悬停的顶部和底部）时，这个额外的边框增加了总高度按钮的大小刚好足以将下游 html 推到一个小凸起中，这在视觉上很烦人。在包含的 gif 中，当悬停过渡完成时，您会注意到它最多，您应该看到一个 1px 的边框在最后突然消失。我怎样才能防止这额外的几个像素的边框产生和碰撞我的 html 的其余部分？还有其他方法可以产生我想要的相同效果吗？

这是我第二次 post 来这里，最后一次是将近 2 年前，所以如果我遗漏了一些我应该包含的内容，请告诉我，感谢阅读！

HTML:

<div class="--square e--block --btn">
    <h1>Create Backups</h1>                    
</div>

SCSS 变量：

$mainSize: 100px;
$btnBorder: 10px;

SCSS:


//-- Basic element
.e--block {
    //-- Position
    //- Flex
    display: flex;
    flex-direction: column;
    justify-content: center;
    //- Text
    text-align: center;
    //- Align
    margin: $baseSpacing;

    //-- Style
    //- BG
    background-color: $btnColorLight;
    //- Text
    color: $white;
    font-weight: 2;
    //- Border
    //border: none;
    border-radius: $borderRadius;

    
    * {
        //-- Position
        //- Flex
        vertical-align: middle;
        //- Align
        padding: {
            top: 10px;
            bottom: 10px;
        }
        margin: auto;
    }
}

.--btn {
    //-- Style
    //- Border
    border: 0px solid white;
    //- Transition
    transition: {
        property: border-width, height;
        duration: 1s;
        timing-function: ease;
    }
}
.--square {
    //-- Position
    //- Size
    height: ($mainSize * 2);
    width: ($mainSize * 2);
}
.--btn.--square:hover:not(.--no-trans) {
    //-- Position
    //- Size
    height: (($mainSize * 2) - ($btnBorder * 2));
    //-- Style
    //- Border
    border-top-width: $btnBorder;
    border-bottom-width: $btnBorder;
}

Answer 1

我无法解释为什么会出现这个问题，但我猜这是因为渲染引擎不擅长处理这种双重过渡。

作为一种解决方法，您可以在 .--square 上设置 box-sizing 属性和 border-box 值，然后删除 height 更改：

.--square {
   //-- Position
   //- Size
   height: ($mainSize * 2);
   width: ($mainSize * 2);
   box-sizing: border-box;
}

.--btn.--square:hover:not(.--no-trans) {
    //-- Position
    //- Size
    //-- Style
    //- Border
    border-top-width: $btnBorder;
    border-bottom-width: $btnBorder;
}

Answer 2

此外，我认为您可以通过使用自定义 timing-function 稍微固定一下这个凸起，例如：

transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);

CSS 边框过渡添加不需要的额外像素

CSS Border Transition adds Unwanted Extra Pixels

html

css

sass

css-transitions

electron