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

Question

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

这是我在这里的第二篇文章，最后一篇是在 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;
}

标签： htmlcsssasselectroncss-transitions

Answer 1

另外我认为你可以通过使用 custom 来稍微加快这个凹凸timing-function，例如：

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