如何在css转换期间保持内联块和表单元格元素在同一行

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"代替。

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

我在这里错过了什么？谢谢

Answer 1

您可以通过添加定位-来实现

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

就是这样：）

Answer 2

在CSS的底部，尝试将左边的边距更改为0%:

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