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;
}

然后取下衬垫。 BHAM !!!!问题得到解决，过渡看起来很完美。

问题：

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

我建议的解决方案

我希望如果这个问题可以在CSS中解决，因为我不会将我的文档与JS混为一谈。那怎么样：

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

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

希望我能很好地总结我的问题，如果有人能给我一个更好的解决方案，我会双臂接受它。

谢谢。

Alexande。

Answer 1

转换属性在所有支持转换的浏览器中以逗号分隔：

.nav a {
  -webkit-transition: color .2s, text-shadow .2s;
  /* And so on... */
}

Ease是默认值，因此您不必指定它。如果你真的想要线性，你需要指定它，即-webkit-transition：color .2s linear，text-shadow .2s linear;

Or try this
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;

这是link

Answer 2

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

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

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

查看更新后的小提琴here。

编辑：我清理了一下css：

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

小提琴是here。

仅使用css在转换后隐藏元素

2 个答案: