个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
所以我正在尝试模拟我在 Google 页面上看到的按钮转换 我已经尝试了各种方法来使转换平滑，但无法使其表现得像其 Google 对应部分那样平滑。具体来说，我想要#fade_one 的平滑扩展来填充#button 并平滑淡出。到目前为止，我还不能通过同时进行边距和宽度转换来实现这一点，它们各自的缓入和缓出参数的时间似乎不想同步移动。任何帮助将不胜感激!这是谷歌链接http://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-surface-response (向下滚动到“触摸时抬起”的位置)，这是我的 fiddle 链接 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，谢谢!
最佳答案
您遇到的问题基本上与 CSS 定位有关。 #fade_one 元素具有绝对定位。当您给您一个元素绝对位置时，它会脱离页面的正常流并定位相对于其最近的定位祖先。
在您的情况下，您希望 #fade_one 元素覆盖在 #button 元素之上。换句话说，您希望 #fade_one 相对于 #button 定位。但是为了使绝对元素与其祖先相关，该祖先也需要“定位”。 #button 元素不在此处。
因此，当悬停被触发时，#fade_one 元素获得其定位祖先的 100% 宽度——这不是 #button。在 fiddle 中，没有定位的祖先，所以它采用 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;
}
在这里 fiddle :http://jsfiddle.net/hJchP/11/
关于html - 淡入淡出的按钮过渡不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24498166/
25
4
0
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？ 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀！