Question

所以我试图模仿我在Google页面上看到的按钮转换我已经尝试了各种各样的事情来使转换顺利但不能让它表现得像它的Google计数器部分一样流畅。具体而言，我想要#fade_one的平滑扩展，填充#button并平滑淡出。到目前为止，我还没有通过同时进行边距和宽度转换来实现这一点，它们各自的缓入和缓出参数的时序似乎并不想同步移动。任何帮助将不胜感激！这是Google链接http://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-surface-response（向下滚动到“触摸时抬起”的位置）这里是我的小提琴链接http://jsfiddle.net/darth_business/hJchP/2/ 最后这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="button.css">
</head>

<body>

<div id="button">
<div id="fade_one"></div>
<p id="button_text">Click Me</p>
</div> <!-- button ends -->

#button {
    height: 100px;
    width: 200px;
    background-color: #5677fc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#button:hover #fade_one {
    width: 100%;
    margin: 0 0 0 0;
    opacity: 0;
}
#button_text {
    color: #fff;
    font-family: Roboto;
    font-size: 50px;
}
#fade_one {
    position: absolute;
    height: 100px;
    width: 0px;
    margin: 0 0 0 100px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #fff;
    -moz-transition: width .5s ease-in-out, opacity 1s ease-in;, margin .25s ease-in-out, opacity 1s ease-in;
}

最后我想提一下，如果可以的话，我想尽量远离使用java，谢谢！

Answer 1

您遇到的问题基本上是关于CSS定位。 #fade_one元素具有绝对定位。当您给出一个元素绝对位置时，它将从页面的正常流程中取出，并相对于其最近的位置定位。

在您的情况下，您希望#fade_one元素成为#button元素之上的叠加层。换句话说，您希望#fade_one相对于#button定位。但是为了使绝对元素与其祖先相对，祖先也需要“定位”。 #button元素不在此处。

因此，当触发悬停时，#fade_one元素将获得其定位祖先的100％宽度 - 这不是#button。在小提琴中，没有定位的祖先，因此它需要body元素的宽度。

诀窍是给你想要包含绝对定位的孩子的祖先元素一个位置。在这里，简单地给#button一个相对位置足以将其更改为#fade_one的定位祖先。

以下是关于定位的更多内容：

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning

我也拿出了保证金，因为它们是不必要的。试试这个CSS：

#button { height: 100px; position: relative; width: 200px; background-color: #5677fc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #button:hover #fade_one { width: 100%; opacity: 0; left: 0; right: 0; } #button_text { color: #fff; font-family: Roboto; font-size: 50px; } #fade_one { position: absolute; height: 100px; width: 0px; left: 100px; top: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: #fff; transition: left .5s ease-in-out, width .5s ease-in-out, opacity 1s ease-in, opacity 1s ease-in; }

在这里小提琴：http://jsfiddle.net/hJchP/11/

Answer 2

不像我想的那样顺利但是codepen可以帮助你。关键部分是创建一个伪元素，然后在悬停时为其设置动画。如果您有任何问题，请告诉我。

<强>代码

HTML

<div class="button">
    <span>
        Button
    </span>
</div>

CSS（不带前缀）

.button {
    font-family: Helvetica, Arial;
    font-size: 12px;
    text-align: center;
    width: 200px;
    padding: 12px 6px;
    margin: 50px auto;
    background-color: #fff;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.button:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    background: #eee;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    transition: 0.2s;
    border-radius: 3px;
    z-index: 0;
}

.button:hover {
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.4);
}

.button:hover:before {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

.button span {
    z-index: 1;
    position: relative;
}

淡入淡出按钮转换不起作用

2 个答案: