类似边框的过渡导致内容移动答案

【问题标题】：Border-like transition causes content to shift类似边框的过渡导致内容移动
【发布时间】：2016-09-30 18:07:13
【问题描述】：

Title 总结得差不多了，这里是一个演示和 CSS。

.edit.input {
    display: inline-block;
}

.edit.input input {
    border: none;
    border-bottom: 1px solid #D4D4D5;
}

.edit.input input:focus {
    outline: none;
    border: transparent;
}

.bar {
    display: block;
}

.bar:after {
    content: '';
    display: block;
    transform: scaleX(0);
    bottom: -2px;
    height: 2px;
    background: #48afb9;
    transition: 300ms ease all;
}

.edit.input input:focus ~ .bar:after {
    transform: scaleX(1);
}

<div class="edit input">
    <input type="text">
    <span class="bar"></span>
</div>

<br>
<br> stuff
<br> other stuff

https://jsfiddle.net/a554h0oo/

我想要达到的目标：

这是我得到的：

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

当您设置边框：透明时，您将顶部的边框宽度重置为 1。

改为设置边框颜色

.edit.input {
    display: inline-block;
}

.edit.input input {
    border: none;
    border-bottom: 1px solid #D4D4D5;
}

.edit.input input:focus {
  outline: none;
    border-color: transparent; /* changed */
}

.bar {
    display: block;
}

.bar:after {
    content: '';
    display: block;
    transform: scaleX(0);
    bottom: -2px;
    height: 2px;
    background: #48afb9;
    transition: 300ms ease all;
}

.edit.input input:focus ~ .bar:after {
    transform: scaleX(1);
}

<div class="edit input">
    <input type="text">
    <span class="bar"></span>
</div>

<br>
<br> stuff
<br> other stuff

【讨论】：

就是这样！这对我来说绝对是一个“陷阱”。谢谢。

【解决方案2】：

试试这个代码。

<style type="text/css">
    .edit.input {
        display: inline-block;
    }

    .edit.input input {
        border: none;
        border-bottom: 1px solid #F312FE;
    }

    .edit.input input:focus { /* virtual selecter */
        outline: none;
        border-color:transparent;
    }

    .bar:after {  /* virtual selecter */
        content: '';
        display: block;
        transform: scaleX(0); /* width * 0 */
        bottom: -2px;
        height: 2px;
        background: #48afb9;
        transition: 300ms ease all;
    }

    .edit.input input:focus ~ .bar:after {
        transform: scaleX(1); /* animation speed : 1 */
    }
}
</style>
<div class="edit input">
<input type="text">
    <div class="bar">
    </div>
</div>

【讨论】：