webkit CSS 过渡
在网站上尝试一些 webkit 转换并遇到了问题。我的链接上的悬停状态添加了 1px 边框并减少了填充，以便定位保持不变。正常情况下工作正常，但当我添加过渡时就不行了。显然，由于我只进行 1px 的更改，所以它会突然发生，但不会同时发生 - 填充在边框之前发生变化，因此整个事情会“抖动”。
#loginbuttons a {
text-decoration: none;
padding: 5px;
-webkit-transition: all 0.5s ease;
}
#loginbuttons a:hover {
padding: 4px;
border: 1px solid black;
background-color: yellow;
}
我发现解决这个问题的最好方法是在正常状态下有一个白色边框，这样它只会改变颜色，但我希望它是透明的。另外，有没有办法在不设置白色背景颜色的情况下将背景颜色从白色淡入黑色而不是黑色？再说一次，我希望它是透明的，但它看起来很奇怪，先变成灰色，然后变成黄色！
我的导航菜单上也有过渡，并且发生了同样的事情（这次更改了填充和边距）：
#nav ul li a {
color: white;
padding: 10px 10px 8px 10px;
margin: 0 5px;
border: 1px solid black;
opacity: 0.85;
-webkit-transition: all, 0.5s;
}
#nav ul li a:hover, #nav ul li a.selected {
color: black;
padding: 13px 13px 11px 13px;
margin: 0 2px;
text-shadow: 2px 2px 4px white, -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white;
opacity: 1;
-webkit-box-shadow: 0px 0px 8px #888;
}
嗯，只是尝试将值提高一点，甚至使用线性将边距和填充更改 15px转换仍然会产生一个小（看起来像 1 或 2px）故障。同样的事情也发生在 Safari 和 Chrome 中。
有人知道如何使其顺利吗？或者解决颜色问题？认为使用 jquery 会更好（忽略跨浏览器支持！）？可能会去看看 Opera 是否会发生同样的事情...
编辑：似乎 Mac 的 10.5a Opera 版本仍然不支持转换...
Trying out some webkit transitions on a site and have come across a problem. The hover state on my links adds a 1px border and decreases the padding so that the positioning stays the same. Works fine normally, but not when I add the transition. Obviously, as I'm only making 1px changes, it happens abruptly, but it doesn't happen at the same time - the padding changes before the border, so the whole thing 'jiggles'.
#loginbuttons a {
text-decoration: none;
padding: 5px;
-webkit-transition: all 0.5s ease;
}
#loginbuttons a:hover {
padding: 4px;
border: 1px solid black;
background-color: yellow;
}
The best way I've found to get around this is to have a white border on the normal state so that it's only changing the color, but I want it to be transparent. Also, is there any way of fading the background color in from white instead of black without setting a white background color? Again, I want it to be transparent, but it just looks weird going gray and then yellow!
I've got transitions on my navigation menu as well, and the same thing happens (this time altering the padding and margin):
#nav ul li a {
color: white;
padding: 10px 10px 8px 10px;
margin: 0 5px;
border: 1px solid black;
opacity: 0.85;
-webkit-transition: all, 0.5s;
}
#nav ul li a:hover, #nav ul li a.selected {
color: black;
padding: 13px 13px 11px 13px;
margin: 0 2px;
text-shadow: 2px 2px 4px white, -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white;
opacity: 1;
-webkit-box-shadow: 0px 0px 8px #888;
}
Hmmm, just tried bumping the values up a bit, and even changing the margin and padding by 15px using a linear transition still produces a small (looks like 1 or 2px) glitch. Same thing happens in safari and chrome.
Anyone got any ideas how to make it smooth? Or sort out the color issue? Think it would be better doing it with jquery (ignoring the cross-browser support!)? Might go and see if the same thing happens with opera...
edit: seems like the 10.5a opera release for macs still doesn't support transitions...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
首先，可能值得尝试
border: 1px Solid transparent以便过渡仅更改边框的颜色。从这个意义上说，填充保持不变，并且浏览器的猜测更少。如果transparent不起作用，则任何 alpha 值为 0 的颜色也可以接受，例如rgba(0, 0, 0, 0)。Opera Presto 2.3 支持过渡，但它要求不同的声明 -
-o-transition-property等。希望这个链接会有用。 Firefox 也进行 CSS 转换，并且他们有 < a href="http://people.mozilla.com/~prouget/demos/transition/index.xhtml" rel="nofollow noreferrer">演示页面。要在 Firefox 中进行转换，必须使用-moz-语句。First of all, it might be worthy to try
border: 1px solid transparentso that the transition changes only the color of the border. In that sense the padding stays the same and there is less browser guesswork. Iftransparentdoes not work, any color with an alpha value of 0, for example,rgba(0, 0, 0, 0)is also acceptable.Opera Presto 2.3 supports transitions, but it asks for different statements —
-o-transition-propertyet al. Hope that this link would be of good use. Firefox does CSS transitions too, and they have a demo page. To make transitions work in Firefox, one must use-moz-statements.