如何在 css 转换期间将 inline-block 和 table-cell 元素保持在同一行？

Question

查看我的代码笔：http://codepen.io/maidson/pen/RNQXMb（底部的相关 SCSS）

HTML

<div class="email">
    <div id="thanks"><span>Thanks!</span></div>
    <input id="text"></input>
    <button id="btn" data-text-swap="OK">
        Stay Informed
    </button>
</div>

SCSS

.email{
    display: table;
    margin: 0 auto;
    width: 400px;
    input, button{
        display: table-cell;
        height: 60px;
    }
    #thanks{
        width:0px;
        @include vendorize(transition, $transition);
        background: #fff;
        color: #000;
        white-space: nowrap;
        overflow-x: hidden;
        height: 60px;
        display: inline-block;
        text-align: center;
        line-height: 60px;
        span{
            margin: 0 auto;
        }
    }
    input{
        width: 0;
        margin-left: 25%;
        @include vendorize(transition, $transition);
        background: #fff;
        color: #000;
    }
    button{
        width: 50%;
        @include vendorize(transition, $transition);
        white-space: nowrap;
    }
}
.email.focus{
    input{
        width: 85%;
        margin-left: 0%;
    }
    button{
        width: 15%;
    }
}
.email.submit{
    #thanks{
        width: 100%;
        background: #ccc;
    }
    input{
        width: 0%;
        margin-left: 100%;
        background-color: #ccc;
    }
    button{
        width: 0%;
    }
}

我有一个由两部分组成的动画，我想在一个框中引导用户完成电子邮件注册。目前，一些js用于在第一次点击时分配class="focus"，在第二次点击时将其替换为class="submit"。

我希望整个序列保留在一行上，并且我希望最后一个过渡从左到右擦除（单击“确定”后）。目前，#thanks div 导致其他两个元素溢出到第二行。我想在保留过渡动画的同时防止这种情况发生。

我在这里缺少什么？谢谢！

Answer 1

你可以通过添加定位来做到这一点-

.email{
    position:relative;
    #thanks{
       position:absolute;
    }
}

就是这样:)

Answer 2

在 CSS 的底部，尝试将 margin-left 更改为 0%：

.email.submit{
    #thanks{
        width: 100%;
        background: #ccc;
    }
    input{
        width: 0%;
        margin-left: 0%;
        background-color: #ccc;
    }
    button{
        width: 0%;
    }
}