html - 仅使用 CSS 在转换后隐藏元素

Question

我一直在尝试设计一个登录表单，按钮需要一点过渡效果。但是有一个复杂性。

背景:我最初从这里复制了这个想法:original form .

注意主容器上没有填充(左和右)，现在在我的演示中，留下填充很关键，这会产生问题(将进一步解释)。

现在这是我的演示:

My version of login form (不要害怕 108 行 CSS 代码；我将在下面粘贴与我的问题相关的代码)。

所以与这个问题相关的代码如下。

HTML代码:

<button class="login-button"><span>SEND</span></button> 

CSS代码:

.login-button{
    width: 100%;
    outline: none;
    border:none;    
    cursor: pointer;
    padding: 0;
    margin:0;
    transition:.3s;
}

.login-input , .login-button{
    height: 50px;
    line-height: 40px;
    transition:.3s;
}

.login-button span{
    display: block;
    background:red;
    height: 100%;
    width: 100%;
    left: 0;
    transition:.3s;
    position: relative;
}

.login-button span:before{
    content: 'ok';
    position: absolute;
    left: 100%;
    display: block;
}

.login-button:hover span:before{
    content: 'OK To go now';
    position: absolute;
    /*left: 0%;*/
    text-align: center;
    display: block;
    width: 100%;
    height: 100%;
}

现在，如果我转到主容器的 CSS 样式:

即

 .main-login{
    min-width: 200px;
    max-width: 400px;
    background: #533e69;
    margin: 100px auto;
    text-align: center;
    overflow: hidden;
    box-shadow: 1px 1px 10px rgba(0,0,0,.2);
    padding: 0 20px;
}

然后去掉填充，然后问题就解决了，过渡看起来很完美。

问题

我的要求是我需要填充，所以现在发生的是当您将鼠标悬停在按钮上并且 span 元素移动 left:-100% 时，它仍然在主容器中可见。

建议的解决方案

如果这个问题只能在 CSS 中解决，我会很高兴，因为我真的不喜欢用 JS 弄乱我的文档。那么这个怎么样。

我是 CSS 新手，所以我的解决方案可能不够优雅:

当鼠标悬停在按钮上时，跨度超过 left:-100%，如果跨度可以设置为 display:none。听起来很简单，但我对 CSS 的有限了解使我陷入困境。

Answer 1

您需要将背景设置为透明。不可能为 display 属性设置动画。

添加此 css 代码，它应该可以工作:

.login-button:hover span{
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
    transition: 2s;
    background: rgba(1,1,1,0);
}

查看更新后的 fiddle here .

编辑:我稍微清理了一下 CSS:

.login-button:hover span{
    transition: 0.3s;
    background: transparent;
}

fiddle 是 here .